{
    "componentChunkName": "component---src-pages-iconography-pictograms-usage-mdx",
    "path": "/iconography/pictograms/usage/",
    "result": {"pageContext":{"frontmatter":{"title":"Pictograms","description":"Pictograms are visual symbols used to represent ideas, objects, or narratives at a glance. They work well in presentations and marketing communications.","tabs":["Library","Design","Usage","Contribute"]},"relativePagePath":"/iconography/pictograms/usage.mdx","titleType":"append","MdxNode":{"id":"3ce2fb89-375a-525a-90e8-62f0ca02e5ce","children":[],"parent":"f718a285-4c3b-5c73-8833-8c489645dcd1","internal":{"content":"---\ntitle: Pictograms\ndescription:\n  Pictograms are visual symbols used to represent ideas, objects, or narratives\n  at a glance. They work well in presentations and marketing communications.\ntabs: [Library, Design, Usage, Contribute]\n---\n\nimport { Bee } from '@carbon/icons-react';\nimport * as styles from './custom-table.module.scss'\n\n<PageDescription>\n\nUse pictograms to communicate at a glance, offer interactivity or simplify complex ideas. This page shows examples for many use cases, such as websites, product UIs, signage, events and merchandise. When used appropriately, they become an elegant addition to the IBM experience.\n\n</PageDescription>\n\n<AnchorLinks>\n  <AnchorLink>Productive versus expressive</AnchorLink>\n  <AnchorLink>Sizing</AnchorLink>\n  <AnchorLink>Alignment</AnchorLink>\n  <AnchorLink>Containers</AnchorLink>\n  <AnchorLink>Clearance</AnchorLink>\n  <AnchorLink>Color</AnchorLink>\n  <AnchorLink>Pictograms as illustrations</AnchorLink>\n  <AnchorLink>Pictograms in action</AnchorLink>\n</AnchorLinks>\n\n## Productive versus expressive\n\nProductive and expressive pictograms are two distinct types of artwork that work best in different contexts. Productive pictograms are the go-to pictogram type for most contexts; they work across a variety of scales and environments, whether physical or digital. They’re illustrative and simple, enabling one or many to be used to convey complex ideas.\n\nExpressive pictograms represent a more dynamic option to the standard pictogram, using gradients, layering and transparency to build a sense of depth and movement in the artwork. Due to their visual complexity, expressive pictograms should be used selectively and only in scenarios that call for a graphic with a strong presence.\n\n<Tabs>\n<Tab label=\"Productive\">\n\n<ArtDirection>\n\n![Expressive pictogam example](images/usage_v2/01-idl-iconography-pictograms-usage.png)\n![Expressive pictogam example](images/usage_v2/01-idl-iconography-pictograms-usage.png)\n\n</ArtDirection>\n\n<Row>\n<Column colMd={8} colLg={12} noGutterSm>\n  \n<div className={styles.tableContainer}>\n    <table className=\"page-table\">\n      <thead>\n        <tr>\n          <th className={styles.tableHeader}>Productive pictograms in context</th>\n          <th className={styles.tableHeader}></th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr>\n          <td>Use productive pictograms to deliver clear, consistent visual messaging across interfaces and environments. Their simplicity and adaptability make them ideal for most applications.</td>\n          <td/>\n        </tr>\n      </tbody>\n    </table>\n</div>\n\n</Column>\n</Row>\n\n</Tab>\n<Tab label=\"Expressive\">\n\n<ArtDirection>\n\n![Expressive pictogam example](images/usage_v2/02-idl-iconography-pictograms-usage.png)\n![Expressive pictogam example](images/usage_v2/02-idl-iconography-pictograms-usage.png)\n\n</ArtDirection>\n\n</Tab>\n</Tabs>\n\n<DoDontRow>\n<DoDont caption=\"Treat pictograms as illustations with sufficient sizing.\">\n\n![Pictogram with sufficient sizing](images/13_Usage_do.svg)\n\n</DoDont>\n<DoDont type=\"dont\" caption=\"Don’t use pictograms as a replacement for UI icons. It’s not their purpose.\">\n\n![Pictograms at UI icon scale](images/13_Usage_dont.svg)\n\n</DoDont>\n</DoDontRow>\n\n<DoDontRow>\n<DoDont caption=\"Use expressive pictograms as large, bold graphics.\">\n\n![Expressive pictogram as hero graphic](images/usage_v2/05-idl-iconography-pictograms-usage.png)\n\n</DoDont>\n<DoDont type=\"dont\" caption=\"Don’t overuse expressive pictograms. They should be used sparingly.\">\n\n![Don’t overuse expressive pictograms](images/usage_v2/06-idl-iconography-pictograms-usage.png)\n\n</DoDont>\n</DoDontRow>\n\n<DoDontRow>\n<DoDont type=\"dont\" caption=\"Don’t use productive pictograms as logos or in a lockup for product headers, merchandise or events.\">\n\n![Don’t use pictograms as logos](images/usage_v2/07-idl-iconography-pictograms-usage.png)\n\n</DoDont>\n<DoDont type=\"dont\" caption=\"Don’t use expressive pictograms as logos or in a lockup for product headers, merchandise or events.\">\n\n![Don’t use pictograms as logos](images/usage_v2/08-idl-iconography-pictograms-usage.png)\n\n</DoDont>\n</DoDontRow>\n\n## Sizing\n\nPictograms are used in a range of sizes, the minimum being 48px. The maximum size may vary based on the application. Use pictograms at their original sizes or scale at accepted increments.\n\n<Tabs>\n<Tab label=\"Productive\">\n\n<ArtDirection>\n\n![Expressive pictogam example](images/14_Sizing_2-mobile.svg)\n![Expressive pictogam example](images/usage_v2/09-idl-iconography-pictograms-usage.png)\n\n</ArtDirection>\n\n</Tab>\n<Tab label=\"Expressive\">\n\n<ArtDirection>\n\n![Expressive pictogam example](images/usage_v2/10-idl-iconography-pictograms-usage.png)\n![Expressive pictogam example](images/usage_v2/10-idl-iconography-pictograms-usage.png)\n\n</ArtDirection>\n\n</Tab>\n</Tabs>\n\n## Alignment\n\nPictograms are optically aligned to the center of the icon grid within the boundary box. \nCentering ensures that all pictograms will be aligned correctly when exported and used side by side.\n\n<ArtDirection>\n\n![Alignment Example](images/15_Alignment_1-mobile.svg)\n![Alignment Example](images/15_Alignment_1.svg)\n\n</ArtDirection>\n\n## Containers\n\nPictograms can be represented in a circular or rectangular container calculated based on the padding size.\n\n<ArtDirection>\n\n![Padding Example](images/16_Containers_1-mobile.svg)\n![Padding Example](images/16_Containers_1.svg)\n\n</ArtDirection>\n\n<DoDontRow>\n<DoDont caption=\"Keep pictograms at scale and optically centered in the container whenever possible.\">\n\n![keep scale and optically center pictograms](images/16_Containers_3_do.svg)\n\n</DoDont>\n<DoDont type=\"dont\" caption=\"Don’t resize pictograms outside of accepted proportions.\">\n\n![adhere to accepted proportions](images/16_Containers_4_dont.svg)\n\n</DoDont>\n</DoDontRow>\n\n<DoDontRow>\n<DoDont caption=\"Do use accepted shapes—circle or square—for containers.\">\n\n![use accepted container shapes](images/16_Containers_5_do.svg)\n\n</DoDont>\n<DoDont type=\"dont\" caption=\"Don’t create new shapes for containers.\">\n\n![avoid unaccepted container shapes](images/16_Containers_6_dont.svg)\n\n</DoDont>\n</DoDontRow>\n\n<DoDontRow>\n<DoDont caption=\"Always optically center align pictograms in their containers.\">\n\n![optically center align pictograms in containers](images/16_Containers_7_do.svg)\n\n</DoDont>\n<DoDont type=\"dont\" caption=\"Don’t crop pictograms in the container.\">\n\n![never crop pictograms in container](images/16_Containers_8_dont.svg)\n\n</DoDont>\n</DoDontRow>\n\n## Clearance\n\nWhen designing with pictograms, all artwork should include minimum padding based on 1/4 of the scaled grid size. \nThe padding can be increased by increments of 1/4 grid units.\n\n<ArtDirection>\n\n![padding applies regardless of container shape](images/usage_v2/19-idl-iconography-pictograms-usage.png)\n\n![padding applies regardless of container shape](images/usage_v2/19-idl-iconography-pictograms-usage.png)\n\n</ArtDirection>\n\n<DoDontRow>\n<DoDont caption=\"Follow the clearance rule to allow for legibility and touch.\">\n\n![allow clearance for legibility and touch](images/usage_v2/20-idl-iconography-pictograms-usage.png)\n\n</DoDont>\n<DoDont type=\"dont\" caption=\"Don’t collapse the pictogram clearance area.\">\n\n![keep pictogram clearance area](images/usage_v2/21-idl-iconography-pictograms-usage.png)\n\n</DoDont>\n</DoDontRow>\n\n## Color\n\nPictograms on backgrounds must always pass color contrast requirements. When pairing pictograms with backgrounds, follow color-family rules to ensure that the pictogram doesn’t clash with or blend into the background. Dark background colors should range between values 70–100 while light backgrounds should not exceed values 10–20.\n\n<ArtDirection>\n\n![pictogram with color contrast example](/images/10_Backgrounds-mobile_1.svg)\n![pictogram with color contrast example](/images/10_Backgrounds_1.svg)\n\n</ArtDirection>\n\n<DoDontRow>\n<DoDont caption=\"Follow the 5-step color rule and only match tones from the same color family or use grayscale backgrounds.\">\n\n![pictogram background example](/images/10_Backgrounds_2_do.svg)\n\n</DoDont>\n<DoDont caption=\"Follow gradient rules when placing them on backgrounds.\">\n\n![pictogram background example](/images/10_Backgrounds_3_do.svg)\n\n</DoDont>\n</DoDontRow>\n\n<DoDontRow>\n<DoDont type=\"dont\" caption=\"Don’t place dark tones on dark backgrounds.\">\n\n![pictogram background example](/images/10_Backgrounds_4_dont.svg)\n\n</DoDont>\n<DoDont type=\"dont\" caption=\"Don’t place light tones on light backgrounds.\">\n\n![pictogram background example](/images/10_Backgrounds_5_dont.svg)\n\n</DoDont>\n</DoDontRow>\n\n<DoDontRow>\n<DoDont type=\"dont\" caption=\"Don’t place gradient pictograms on backgrounds that are not 80 and above or 20 and below.\">\n\n![pictogram background example](/images/10_Backgrounds_6_dont.svg)\n\n</DoDont>\n<DoDont type=\"dont\" caption=\"Don’t place gradient pictograms on gradient backgrounds.\">\n\n![pictogram background example](/images/10_Backgrounds_7_dont.svg)\n\n</DoDont>\n</DoDontRow>\n\n### Expressive pictogram color\n\nExpressive pictograms have four color themes: dark, light, monochromatic dark  and monochromatic light. To ensure accessibility, use the color theme that corresponds with the pictogram’s background color.\n\n<ArtDirection>\n\n![Expressive pictogram in 4 color themes](images/usage_v2/29-idl-iconography-pictograms-usage.png)\n![Expressive pictogram icon in 4 color themes](images/usage_v2/29-idl-iconography-pictograms-usage.png)\n\n</ArtDirection>\n\n| Background color value | Pictogram theme             |\n| ---------------------- | --------------------------- |\n| White, 10–20           | Light                       |\n| 30–50                  | Monochromatic light (Black) |\n| 50–70                  | Monochromatic dark (White)  |\n| 80–100, Black          | Dark                        |\n\n<DoDontRow>\n<DoDont caption=\"Use dark-theme pictograms on dark backgrounds and light-theme pictograms on light backgrounds.\">\n\n![Expressive pictogram with correct color theme](images/expressivePictograms_usage-colorDo_v2.svg)\n\n</DoDont>\n<DoDont type=\"dont\" caption=\"Don’t use light-theme pictograms on dark backgrounds or dark-theme pictograms on light backgrounds.\">\n\n![Expressive pictogram with incorrect color theme](images/expressivePictograms_usage-colorDont_v2.svg)\n\n</DoDont>\n</DoDontRow>\n<DoDontRow>\n<DoDont type=\"dont\" caption=\"Don’t place expressive pictograms on backgrounds between 30 and 70. Use the monochromatic version for this case.\">\n\n![Expressive pictogram on Blue 60](images/expressivePictograms_usage-colorDont_3.svg)\n\n</DoDont>\n<DoDont type=\"dont\" caption=\"Don’t place expressive pictograms on gradient backgrounds.\">\n\n![Expressive pictogram on gradient background](images/expressivePictograms_usage-colorDont_4_v2.svg)\n\n</DoDont>\n</DoDontRow>\n\n## Pictograms as illustrations\n\nPictograms can serve as a base for more complex illustrations, helping speed up design and ensure consistency. They can also be scaled for workspace environments, such as wall art, bringing the brand into the environment in a bold, cohesive way.\n\n<ImageGallery>\n\n<ImageGalleryImage alt=\"pictogram on sign\" title=\"Pictogram on sign\" col={8}>\n\n![](images/usage_v2/34-idl-iconography-pictograms-usage-v2.png)\n\n</ImageGalleryImage>\n\n<ImageGalleryImage alt=\"pictogram on sign\" title=\"Pictogram on sign\" col={4}>\n\n![](images/usage_v2/35-idl-iconography-pictograms-usage.png)\n\n</ImageGalleryImage>\n\n</ImageGallery>\n\n## Pictograms in action\n\n<ImageGallery>\n\n<ImageGalleryImage alt=\"\" title=\"Pictogram on sign\" col={12}>\n\n![](images/usage_v2/36-idl-iconography-pictograms-usage.png)\n\n</ImageGalleryImage>\n\n<ImageGalleryImage alt=\"\" title=\"Expressive pictogram on web\" col={4}>\n\n![](images/usage_v2/37-idl-iconography-pictograms-usage.png)\n\n</ImageGalleryImage>\n\n<ImageGalleryImage alt=\"\" title=\"Pictogram on hat\" col={8}>\n\n![](images/usage_v2/38-idl-iconography-pictograms-usage.png)\n\n</ImageGalleryImage>\n\n<ImageGalleryImage alt=\"\" title=\"Expressive pictogram on poster\" col={8}>\n\n![](images/usage_v2/39-idl-iconography-pictograms-usage.png)\n\n</ImageGalleryImage>\n\n<ImageGalleryImage alt=\"\" title=\"Pictogram on card\" col={4}>\n\n![](images/usage_v2/40-idl-iconography-pictograms-usage.png)\n\n</ImageGalleryImage>\n\n<ImageGalleryImage alt=\"\" title=\"Pictogram on wallpaper\" col={12}>\n\n![](images/usage_v2/41-idl-iconography-pictograms-usage.png)\n\n</ImageGalleryImage>\n\n<ImageGalleryImage alt=\"\" title=\"Pictogram on wallpaper\" col={4}>\n\n![](images/usage_v2/42-idl-iconography-pictograms-usage.png)\n\n</ImageGalleryImage>\n\n<ImageGalleryImage alt=\"\" title=\"Pictogram on wallpaper\" col={8}>\n\n![](images/usage_v2/43-idl-iconography-pictograms-usage.png)\n\n</ImageGalleryImage>\n\n</ImageGallery>\n","type":"Mdx","contentDigest":"3188ab8c8e6d402d23f7667f8d500d14","owner":"gatsby-plugin-mdx","counter":1930},"frontmatter":{"title":"Pictograms","description":"Pictograms are visual symbols used to represent ideas, objects, or narratives at a glance. They work well in presentations and marketing communications.","tabs":["Library","Design","Usage","Contribute"]},"exports":{},"rawBody":"---\ntitle: Pictograms\ndescription:\n  Pictograms are visual symbols used to represent ideas, objects, or narratives\n  at a glance. They work well in presentations and marketing communications.\ntabs: [Library, Design, Usage, Contribute]\n---\n\nimport { Bee } from '@carbon/icons-react';\nimport * as styles from './custom-table.module.scss'\n\n<PageDescription>\n\nUse pictograms to communicate at a glance, offer interactivity or simplify complex ideas. This page shows examples for many use cases, such as websites, product UIs, signage, events and merchandise. When used appropriately, they become an elegant addition to the IBM experience.\n\n</PageDescription>\n\n<AnchorLinks>\n  <AnchorLink>Productive versus expressive</AnchorLink>\n  <AnchorLink>Sizing</AnchorLink>\n  <AnchorLink>Alignment</AnchorLink>\n  <AnchorLink>Containers</AnchorLink>\n  <AnchorLink>Clearance</AnchorLink>\n  <AnchorLink>Color</AnchorLink>\n  <AnchorLink>Pictograms as illustrations</AnchorLink>\n  <AnchorLink>Pictograms in action</AnchorLink>\n</AnchorLinks>\n\n## Productive versus expressive\n\nProductive and expressive pictograms are two distinct types of artwork that work best in different contexts. Productive pictograms are the go-to pictogram type for most contexts; they work across a variety of scales and environments, whether physical or digital. They’re illustrative and simple, enabling one or many to be used to convey complex ideas.\n\nExpressive pictograms represent a more dynamic option to the standard pictogram, using gradients, layering and transparency to build a sense of depth and movement in the artwork. Due to their visual complexity, expressive pictograms should be used selectively and only in scenarios that call for a graphic with a strong presence.\n\n<Tabs>\n<Tab label=\"Productive\">\n\n<ArtDirection>\n\n![Expressive pictogam example](images/usage_v2/01-idl-iconography-pictograms-usage.png)\n![Expressive pictogam example](images/usage_v2/01-idl-iconography-pictograms-usage.png)\n\n</ArtDirection>\n\n<Row>\n<Column colMd={8} colLg={12} noGutterSm>\n  \n<div className={styles.tableContainer}>\n    <table className=\"page-table\">\n      <thead>\n        <tr>\n          <th className={styles.tableHeader}>Productive pictograms in context</th>\n          <th className={styles.tableHeader}></th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr>\n          <td>Use productive pictograms to deliver clear, consistent visual messaging across interfaces and environments. Their simplicity and adaptability make them ideal for most applications.</td>\n          <td/>\n        </tr>\n      </tbody>\n    </table>\n</div>\n\n</Column>\n</Row>\n\n</Tab>\n<Tab label=\"Expressive\">\n\n<ArtDirection>\n\n![Expressive pictogam example](images/usage_v2/02-idl-iconography-pictograms-usage.png)\n![Expressive pictogam example](images/usage_v2/02-idl-iconography-pictograms-usage.png)\n\n</ArtDirection>\n\n</Tab>\n</Tabs>\n\n<DoDontRow>\n<DoDont caption=\"Treat pictograms as illustations with sufficient sizing.\">\n\n![Pictogram with sufficient sizing](images/13_Usage_do.svg)\n\n</DoDont>\n<DoDont type=\"dont\" caption=\"Don’t use pictograms as a replacement for UI icons. It’s not their purpose.\">\n\n![Pictograms at UI icon scale](images/13_Usage_dont.svg)\n\n</DoDont>\n</DoDontRow>\n\n<DoDontRow>\n<DoDont caption=\"Use expressive pictograms as large, bold graphics.\">\n\n![Expressive pictogram as hero graphic](images/usage_v2/05-idl-iconography-pictograms-usage.png)\n\n</DoDont>\n<DoDont type=\"dont\" caption=\"Don’t overuse expressive pictograms. They should be used sparingly.\">\n\n![Don’t overuse expressive pictograms](images/usage_v2/06-idl-iconography-pictograms-usage.png)\n\n</DoDont>\n</DoDontRow>\n\n<DoDontRow>\n<DoDont type=\"dont\" caption=\"Don’t use productive pictograms as logos or in a lockup for product headers, merchandise or events.\">\n\n![Don’t use pictograms as logos](images/usage_v2/07-idl-iconography-pictograms-usage.png)\n\n</DoDont>\n<DoDont type=\"dont\" caption=\"Don’t use expressive pictograms as logos or in a lockup for product headers, merchandise or events.\">\n\n![Don’t use pictograms as logos](images/usage_v2/08-idl-iconography-pictograms-usage.png)\n\n</DoDont>\n</DoDontRow>\n\n## Sizing\n\nPictograms are used in a range of sizes, the minimum being 48px. The maximum size may vary based on the application. Use pictograms at their original sizes or scale at accepted increments.\n\n<Tabs>\n<Tab label=\"Productive\">\n\n<ArtDirection>\n\n![Expressive pictogam example](images/14_Sizing_2-mobile.svg)\n![Expressive pictogam example](images/usage_v2/09-idl-iconography-pictograms-usage.png)\n\n</ArtDirection>\n\n</Tab>\n<Tab label=\"Expressive\">\n\n<ArtDirection>\n\n![Expressive pictogam example](images/usage_v2/10-idl-iconography-pictograms-usage.png)\n![Expressive pictogam example](images/usage_v2/10-idl-iconography-pictograms-usage.png)\n\n</ArtDirection>\n\n</Tab>\n</Tabs>\n\n## Alignment\n\nPictograms are optically aligned to the center of the icon grid within the boundary box. \nCentering ensures that all pictograms will be aligned correctly when exported and used side by side.\n\n<ArtDirection>\n\n![Alignment Example](images/15_Alignment_1-mobile.svg)\n![Alignment Example](images/15_Alignment_1.svg)\n\n</ArtDirection>\n\n## Containers\n\nPictograms can be represented in a circular or rectangular container calculated based on the padding size.\n\n<ArtDirection>\n\n![Padding Example](images/16_Containers_1-mobile.svg)\n![Padding Example](images/16_Containers_1.svg)\n\n</ArtDirection>\n\n<DoDontRow>\n<DoDont caption=\"Keep pictograms at scale and optically centered in the container whenever possible.\">\n\n![keep scale and optically center pictograms](images/16_Containers_3_do.svg)\n\n</DoDont>\n<DoDont type=\"dont\" caption=\"Don’t resize pictograms outside of accepted proportions.\">\n\n![adhere to accepted proportions](images/16_Containers_4_dont.svg)\n\n</DoDont>\n</DoDontRow>\n\n<DoDontRow>\n<DoDont caption=\"Do use accepted shapes—circle or square—for containers.\">\n\n![use accepted container shapes](images/16_Containers_5_do.svg)\n\n</DoDont>\n<DoDont type=\"dont\" caption=\"Don’t create new shapes for containers.\">\n\n![avoid unaccepted container shapes](images/16_Containers_6_dont.svg)\n\n</DoDont>\n</DoDontRow>\n\n<DoDontRow>\n<DoDont caption=\"Always optically center align pictograms in their containers.\">\n\n![optically center align pictograms in containers](images/16_Containers_7_do.svg)\n\n</DoDont>\n<DoDont type=\"dont\" caption=\"Don’t crop pictograms in the container.\">\n\n![never crop pictograms in container](images/16_Containers_8_dont.svg)\n\n</DoDont>\n</DoDontRow>\n\n## Clearance\n\nWhen designing with pictograms, all artwork should include minimum padding based on 1/4 of the scaled grid size. \nThe padding can be increased by increments of 1/4 grid units.\n\n<ArtDirection>\n\n![padding applies regardless of container shape](images/usage_v2/19-idl-iconography-pictograms-usage.png)\n\n![padding applies regardless of container shape](images/usage_v2/19-idl-iconography-pictograms-usage.png)\n\n</ArtDirection>\n\n<DoDontRow>\n<DoDont caption=\"Follow the clearance rule to allow for legibility and touch.\">\n\n![allow clearance for legibility and touch](images/usage_v2/20-idl-iconography-pictograms-usage.png)\n\n</DoDont>\n<DoDont type=\"dont\" caption=\"Don’t collapse the pictogram clearance area.\">\n\n![keep pictogram clearance area](images/usage_v2/21-idl-iconography-pictograms-usage.png)\n\n</DoDont>\n</DoDontRow>\n\n## Color\n\nPictograms on backgrounds must always pass color contrast requirements. When pairing pictograms with backgrounds, follow color-family rules to ensure that the pictogram doesn’t clash with or blend into the background. Dark background colors should range between values 70–100 while light backgrounds should not exceed values 10–20.\n\n<ArtDirection>\n\n![pictogram with color contrast example](/images/10_Backgrounds-mobile_1.svg)\n![pictogram with color contrast example](/images/10_Backgrounds_1.svg)\n\n</ArtDirection>\n\n<DoDontRow>\n<DoDont caption=\"Follow the 5-step color rule and only match tones from the same color family or use grayscale backgrounds.\">\n\n![pictogram background example](/images/10_Backgrounds_2_do.svg)\n\n</DoDont>\n<DoDont caption=\"Follow gradient rules when placing them on backgrounds.\">\n\n![pictogram background example](/images/10_Backgrounds_3_do.svg)\n\n</DoDont>\n</DoDontRow>\n\n<DoDontRow>\n<DoDont type=\"dont\" caption=\"Don’t place dark tones on dark backgrounds.\">\n\n![pictogram background example](/images/10_Backgrounds_4_dont.svg)\n\n</DoDont>\n<DoDont type=\"dont\" caption=\"Don’t place light tones on light backgrounds.\">\n\n![pictogram background example](/images/10_Backgrounds_5_dont.svg)\n\n</DoDont>\n</DoDontRow>\n\n<DoDontRow>\n<DoDont type=\"dont\" caption=\"Don’t place gradient pictograms on backgrounds that are not 80 and above or 20 and below.\">\n\n![pictogram background example](/images/10_Backgrounds_6_dont.svg)\n\n</DoDont>\n<DoDont type=\"dont\" caption=\"Don’t place gradient pictograms on gradient backgrounds.\">\n\n![pictogram background example](/images/10_Backgrounds_7_dont.svg)\n\n</DoDont>\n</DoDontRow>\n\n### Expressive pictogram color\n\nExpressive pictograms have four color themes: dark, light, monochromatic dark  and monochromatic light. To ensure accessibility, use the color theme that corresponds with the pictogram’s background color.\n\n<ArtDirection>\n\n![Expressive pictogram in 4 color themes](images/usage_v2/29-idl-iconography-pictograms-usage.png)\n![Expressive pictogram icon in 4 color themes](images/usage_v2/29-idl-iconography-pictograms-usage.png)\n\n</ArtDirection>\n\n| Background color value | Pictogram theme             |\n| ---------------------- | --------------------------- |\n| White, 10–20           | Light                       |\n| 30–50                  | Monochromatic light (Black) |\n| 50–70                  | Monochromatic dark (White)  |\n| 80–100, Black          | Dark                        |\n\n<DoDontRow>\n<DoDont caption=\"Use dark-theme pictograms on dark backgrounds and light-theme pictograms on light backgrounds.\">\n\n![Expressive pictogram with correct color theme](images/expressivePictograms_usage-colorDo_v2.svg)\n\n</DoDont>\n<DoDont type=\"dont\" caption=\"Don’t use light-theme pictograms on dark backgrounds or dark-theme pictograms on light backgrounds.\">\n\n![Expressive pictogram with incorrect color theme](images/expressivePictograms_usage-colorDont_v2.svg)\n\n</DoDont>\n</DoDontRow>\n<DoDontRow>\n<DoDont type=\"dont\" caption=\"Don’t place expressive pictograms on backgrounds between 30 and 70. Use the monochromatic version for this case.\">\n\n![Expressive pictogram on Blue 60](images/expressivePictograms_usage-colorDont_3.svg)\n\n</DoDont>\n<DoDont type=\"dont\" caption=\"Don’t place expressive pictograms on gradient backgrounds.\">\n\n![Expressive pictogram on gradient background](images/expressivePictograms_usage-colorDont_4_v2.svg)\n\n</DoDont>\n</DoDontRow>\n\n## Pictograms as illustrations\n\nPictograms can serve as a base for more complex illustrations, helping speed up design and ensure consistency. They can also be scaled for workspace environments, such as wall art, bringing the brand into the environment in a bold, cohesive way.\n\n<ImageGallery>\n\n<ImageGalleryImage alt=\"pictogram on sign\" title=\"Pictogram on sign\" col={8}>\n\n![](images/usage_v2/34-idl-iconography-pictograms-usage-v2.png)\n\n</ImageGalleryImage>\n\n<ImageGalleryImage alt=\"pictogram on sign\" title=\"Pictogram on sign\" col={4}>\n\n![](images/usage_v2/35-idl-iconography-pictograms-usage.png)\n\n</ImageGalleryImage>\n\n</ImageGallery>\n\n## Pictograms in action\n\n<ImageGallery>\n\n<ImageGalleryImage alt=\"\" title=\"Pictogram on sign\" col={12}>\n\n![](images/usage_v2/36-idl-iconography-pictograms-usage.png)\n\n</ImageGalleryImage>\n\n<ImageGalleryImage alt=\"\" title=\"Expressive pictogram on web\" col={4}>\n\n![](images/usage_v2/37-idl-iconography-pictograms-usage.png)\n\n</ImageGalleryImage>\n\n<ImageGalleryImage alt=\"\" title=\"Pictogram on hat\" col={8}>\n\n![](images/usage_v2/38-idl-iconography-pictograms-usage.png)\n\n</ImageGalleryImage>\n\n<ImageGalleryImage alt=\"\" title=\"Expressive pictogram on poster\" col={8}>\n\n![](images/usage_v2/39-idl-iconography-pictograms-usage.png)\n\n</ImageGalleryImage>\n\n<ImageGalleryImage alt=\"\" title=\"Pictogram on card\" col={4}>\n\n![](images/usage_v2/40-idl-iconography-pictograms-usage.png)\n\n</ImageGalleryImage>\n\n<ImageGalleryImage alt=\"\" title=\"Pictogram on wallpaper\" col={12}>\n\n![](images/usage_v2/41-idl-iconography-pictograms-usage.png)\n\n</ImageGalleryImage>\n\n<ImageGalleryImage alt=\"\" title=\"Pictogram on wallpaper\" col={4}>\n\n![](images/usage_v2/42-idl-iconography-pictograms-usage.png)\n\n</ImageGalleryImage>\n\n<ImageGalleryImage alt=\"\" title=\"Pictogram on wallpaper\" col={8}>\n\n![](images/usage_v2/43-idl-iconography-pictograms-usage.png)\n\n</ImageGalleryImage>\n\n</ImageGallery>\n","fileAbsolutePath":"/home/runner/work/design-language-website/design-language-website/src/pages/iconography/pictograms/usage.mdx"}}},
    "staticQueryHashes": ["1364590287","137577622","2102389209","2456312558","2746626797","2881613939","3037994772","768070550"]}