{"componentChunkName":"component---src-pages-guidelines-pictograms-usage-mdx","path":"/guidelines/pictograms/usage/","webpackCompilationHash":"9ffd1cb8ca3b610e9ad3","result":{"pageContext":{"isCreatedByStatefulCreatePages":true,"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","Usage","Contribute"]},"relativePagePath":"/guidelines/pictograms/usage.mdx","titleType":"prepend","MdxNode":{"id":"c3e75c71-9a3b-5fd3-8a9d-f67f1f8f607c","children":[],"parent":"cff23a68-ea6b-5e3b-9757-49876d09b3e7","internal":{"content":"---\ntitle: Pictograms\ndescription: Pictograms are visual symbols used to represent ideas, objects, or narratives at a glance. They work well in presentations and marketing communications.\ntabs: ['Library', 'Usage', 'Contribute']\n---\n\nimport { Bee32 } from '@carbon/icons-react';\n\n<PageDescription>\n\nIBM’s pictograms are visual symbols used to represent ideas, objects, or\nnarratives. They can communicate messages at a glance, afford interactivity,\nand simplify complex ideas. They draw from details found in the Plex typeface\nand work well in presentations and marketing communications.\n\n</PageDescription>\n\n<AnchorLinks>\n  <AnchorLink>Usage</AnchorLink>\n  <AnchorLink>Pictograms in Action</AnchorLink>\n</AnchorLinks>\n\n## Usage\n\nPictograms are illustrative and expressive and can live within a wide variety of\nscales and environments whether digital or physical. As they are built on the same\ngrid as the rest of the IBM icon family, they share many of the same basic\nprinciples but allow for more visual complexity and communication. You may use\npictograms to enhance the information you are conveying across various media.\nIt’s important to use pictograms sparingly but effectively throughout your design.\n\n![Usage Example](images/13_Usage_0.svg)\n\n<Row>\n<Column colMd={4} colLg={4}>\n<DoDontExample type=\"do\" caption=\"Do treat pictograms as illustations and provide proper clearance\">\n\n![Do give proper space](images/13_Usage_1_do.svg)\n\n</DoDontExample>\n</Column>\n</Row>\n\n<Row>\n<Column colMd={4} colLg={4}>\n<DoDontExample type=\"dont\" caption=\"Don’t use pictograms as a replacement for UI icons, that is not their purpose.\">\n\n![Don't replace UI icons with pictograms](images/13_Usage_2_dont.svg)\n\n</DoDontExample>\n</Column>\n<Column colMd={4} colLg={4}>\n<DoDontExample type=\"dont\" caption=\"Don’t use any pictogram as a logo or in a lockup for product headers, merchandise or events.\">\n\n![Don't use pictogram as logo](images/13_Usage_3_dont.svg)\n\n</DoDontExample>\n</Column>\n</Row>\n\n### Sizing\n\nPictograms are used in a range of sizes, the minimum being 32px while the\nmaximum size may vary based on application. Use pictograms at their original\nsizes or scale at accepted increments. You may need to adjust the stroke weight\naccordingly to accommodate larger scales. For more information on scaling and\naccessibility, see the section on mini units on the 2X Grid page.\n\n<ArtDirection>\n\n![Different sized pictograms](images/14_Sizing_1-mobile_2.svg)\n![Different sized pictograms](images/14_Sizing_1.svg)\n\n</ArtDirection>\n\n| Icon size | Stroke width | Padding | Live area | Corner Radius |\n| --------- | ------------ | ------- | --------- | ------------- |\n| 32px      | 0.72px       | 1px     | 32px      | 2px           |\n| 48px      | 1.08px       | 1.5px   | 48px      | 3px           |\n| 64px      | 1.44px       | 2px     | 64px      | 4px           |\n| 80px      | 1.80px       | 2.5px   | 80px      | 5px           |\n| 96px      | 2.16px       | 3px     | 96px      | 6px           |\n\n<Caption>\n  There is no set maximum to pictogram sizes. As you scale pictograms to larger\n  sizes you may want to alter stroke weight to accommodate accessibility or\n  environmental factors.\n</Caption>\n\n<Row>\n  <Column colMd={4} colLg={4}>\n    <ResourceCard\n      subTitle=\"2X Grid: The mini unit\"\n      aspectRatio=\"2:1\"\n      href=\"https://www.ibm.com/design/language/elements/2x-grid#the-mini-unit\">\n      <Bee32 />\n    </ResourceCard>\n  </Column>\n</Row>\n\n### Alignment\n\nPictograms are optically aligned to the center of the icon grid within the\nboundary box. Centering ensures all pictograms will be aligned correctly when\nexported and used side by side.\n\n![](images/15_Alignment_1.svg)\n\n### Containers\n\nPictograms can be represented in a circular or rectangular container calculated\nbased 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<ArtDirection>\n\n![Padding Example](images/16_Containers_2-mobile.svg)\n![Padding Example](images/16_Containers_2.svg)\n\n</ArtDirection>\n\n<Row>\n<Column colMd={4} colLg={4}>\n<DoDontExample type=\"do\" caption=\"Do follow the clearance rule to allow for legibility and touch.\">\n\n![](images/16_Containers_3_do.svg)\n\n</DoDontExample>\n</Column>\n<Column colMd={4} colLg={4}>\n<DoDontExample type=\"dont\" caption=\"Don't collapse the pictogram clearance area.\">\n\n![](images/16_Containers_4_dont.svg)\n\n</DoDontExample>\n</Column>\n</Row>\n<Row>\n<Column colMd={4} colLg={4}>\n<DoDontExample type=\"do\" caption=\"Do use accepted shapes: circle or square for containers.\">\n\n![](images/16_Containers_5_do.svg)\n\n</DoDontExample>\n</Column>\n<Column colMd={4} colLg={4}>\n<DoDontExample type=\"dont\" caption=\"Don’t create new shapes for containers.\">\n\n![](images/16_Containers_6_dont.svg)\n\n</DoDontExample>\n</Column>\n</Row>\n<Row>\n<Column colMd={4} colLg={4}>\n<DoDontExample type=\"do\" caption=\"Do always optically center align pictograms in their containers.\">\n\n![](images/16_Containers_7_do.svg)\n\n</DoDontExample>\n</Column>\n<Column colMd={4} colLg={4}>\n<DoDontExample type=\"dont\" caption=\"Don’t crop pictograms in container.\">\n\n![](images/16_Containers_8_dont.svg)\n\n</DoDontExample>\n</Column>\n</Row>\n\n### Clearance\n\nWhen designing with pictograms, all artwork should include minimum padding\nbased on 1/4 of the scaled grid size. The padding can be increased by increments of\n1/4 grid units.\n\n<ArtDirection>\n\n![](images/17_Clearance_1-mobile.svg)\n![](images/17_Clearance_1.svg)\n\n</ArtDirection>\n\n<Caption>Padding starts at the edge of the container shape.</Caption>\n\n<ArtDirection>\n\n![](images/17_Clearance_2-mobile.svg)\n![](images/17_Clearance_2.svg)\n\n</ArtDirection>\n\n<Caption>Padding is the same for both circle and square containers.</Caption>\n\n<ArtDirection>\n\n![](images/17_Clearance_3-mobile.svg)\n![](images/17_Clearance_3.svg)\n\n</ArtDirection>\n\n<Caption>\n  Same spacing rules apply when using pictograms without containers.\n</Caption>\n\n<Row>\n<Column colMd={4} colLg={4}>\n<DoDontExample type=\"do\" caption=\"Do keep pictograms at scale and optically center in container when necessary.\">\n\n![](images/17_Clearance_4_do.svg)\n\n</DoDontExample>\n</Column>\n<Column colMd={4} colLg={4}>\n<DoDontExample type=\"dont\" caption=\"Don’t resize pictograms outside of accepted proportions.\">\n\n![](images/17_Clearance_5_dont.svg)\n\n</DoDontExample>\n</Column>\n</Row>\n\n## Pictograms in Action\n\n<Row>\n<Column colMd={6} colLg={8}>\n\n![Pictogram on Sign](images/18_In-Context_1.jpg)\n\n</Column>\n<Column colMd={6} colLg={4}>\n\n![Pictogram as logo](images/18_In-Context_2.svg)\n\n</Column>\n</Row>\n\n<Row>\n<Column colSm={4} colMd={4} colLg={4}>\n\n![Pictogram on hat](images/18_In-Context_3.jpg)\n\n</Column>\n<Column colSm={4} colMd={4} colLg={4}>\n\n![Pictogram on poster](images/18_In-Context_4.svg)\n\n</Column>\n<Column colSm={4} colMd={4} colLg={4}>\n<Row>\n\n![Pictogram on poster](images/18_In-Context_5.jpg)\n\n</Row>\n<Row>\n\n![Pictogram example](images/18_In-Context_6.svg)\n\n</Row>\n\n</Column>\n</Row>\n\n<Row>\n<Column colMd={6} colLg={8}>\n\n![Pictogram on card](images/18_In-Context_7.svg)\n\n</Column>\n<Column colMd={6} colLg={4}>\n\n![Pictogram on wallpaper](images/18_In-Context_8.jpg)\n\n</Column>\n</Row>\n","type":"Mdx","contentDigest":"93c2b5d6cd278c3c1e364ab9dcb149c8","counter":1419,"owner":"gatsby-plugin-mdx"},"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","Usage","Contribute"]},"exports":{},"rawBody":"---\ntitle: Pictograms\ndescription: Pictograms are visual symbols used to represent ideas, objects, or narratives at a glance. They work well in presentations and marketing communications.\ntabs: ['Library', 'Usage', 'Contribute']\n---\n\nimport { Bee32 } from '@carbon/icons-react';\n\n<PageDescription>\n\nIBM’s pictograms are visual symbols used to represent ideas, objects, or\nnarratives. They can communicate messages at a glance, afford interactivity,\nand simplify complex ideas. They draw from details found in the Plex typeface\nand work well in presentations and marketing communications.\n\n</PageDescription>\n\n<AnchorLinks>\n  <AnchorLink>Usage</AnchorLink>\n  <AnchorLink>Pictograms in Action</AnchorLink>\n</AnchorLinks>\n\n## Usage\n\nPictograms are illustrative and expressive and can live within a wide variety of\nscales and environments whether digital or physical. As they are built on the same\ngrid as the rest of the IBM icon family, they share many of the same basic\nprinciples but allow for more visual complexity and communication. You may use\npictograms to enhance the information you are conveying across various media.\nIt’s important to use pictograms sparingly but effectively throughout your design.\n\n![Usage Example](images/13_Usage_0.svg)\n\n<Row>\n<Column colMd={4} colLg={4}>\n<DoDontExample type=\"do\" caption=\"Do treat pictograms as illustations and provide proper clearance\">\n\n![Do give proper space](images/13_Usage_1_do.svg)\n\n</DoDontExample>\n</Column>\n</Row>\n\n<Row>\n<Column colMd={4} colLg={4}>\n<DoDontExample type=\"dont\" caption=\"Don’t use pictograms as a replacement for UI icons, that is not their purpose.\">\n\n![Don't replace UI icons with pictograms](images/13_Usage_2_dont.svg)\n\n</DoDontExample>\n</Column>\n<Column colMd={4} colLg={4}>\n<DoDontExample type=\"dont\" caption=\"Don’t use any pictogram as a logo or in a lockup for product headers, merchandise or events.\">\n\n![Don't use pictogram as logo](images/13_Usage_3_dont.svg)\n\n</DoDontExample>\n</Column>\n</Row>\n\n### Sizing\n\nPictograms are used in a range of sizes, the minimum being 32px while the\nmaximum size may vary based on application. Use pictograms at their original\nsizes or scale at accepted increments. You may need to adjust the stroke weight\naccordingly to accommodate larger scales. For more information on scaling and\naccessibility, see the section on mini units on the 2X Grid page.\n\n<ArtDirection>\n\n![Different sized pictograms](images/14_Sizing_1-mobile_2.svg)\n![Different sized pictograms](images/14_Sizing_1.svg)\n\n</ArtDirection>\n\n| Icon size | Stroke width | Padding | Live area | Corner Radius |\n| --------- | ------------ | ------- | --------- | ------------- |\n| 32px      | 0.72px       | 1px     | 32px      | 2px           |\n| 48px      | 1.08px       | 1.5px   | 48px      | 3px           |\n| 64px      | 1.44px       | 2px     | 64px      | 4px           |\n| 80px      | 1.80px       | 2.5px   | 80px      | 5px           |\n| 96px      | 2.16px       | 3px     | 96px      | 6px           |\n\n<Caption>\n  There is no set maximum to pictogram sizes. As you scale pictograms to larger\n  sizes you may want to alter stroke weight to accommodate accessibility or\n  environmental factors.\n</Caption>\n\n<Row>\n  <Column colMd={4} colLg={4}>\n    <ResourceCard\n      subTitle=\"2X Grid: The mini unit\"\n      aspectRatio=\"2:1\"\n      href=\"https://www.ibm.com/design/language/elements/2x-grid#the-mini-unit\">\n      <Bee32 />\n    </ResourceCard>\n  </Column>\n</Row>\n\n### Alignment\n\nPictograms are optically aligned to the center of the icon grid within the\nboundary box. Centering ensures all pictograms will be aligned correctly when\nexported and used side by side.\n\n![](images/15_Alignment_1.svg)\n\n### Containers\n\nPictograms can be represented in a circular or rectangular container calculated\nbased 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<ArtDirection>\n\n![Padding Example](images/16_Containers_2-mobile.svg)\n![Padding Example](images/16_Containers_2.svg)\n\n</ArtDirection>\n\n<Row>\n<Column colMd={4} colLg={4}>\n<DoDontExample type=\"do\" caption=\"Do follow the clearance rule to allow for legibility and touch.\">\n\n![](images/16_Containers_3_do.svg)\n\n</DoDontExample>\n</Column>\n<Column colMd={4} colLg={4}>\n<DoDontExample type=\"dont\" caption=\"Don't collapse the pictogram clearance area.\">\n\n![](images/16_Containers_4_dont.svg)\n\n</DoDontExample>\n</Column>\n</Row>\n<Row>\n<Column colMd={4} colLg={4}>\n<DoDontExample type=\"do\" caption=\"Do use accepted shapes: circle or square for containers.\">\n\n![](images/16_Containers_5_do.svg)\n\n</DoDontExample>\n</Column>\n<Column colMd={4} colLg={4}>\n<DoDontExample type=\"dont\" caption=\"Don’t create new shapes for containers.\">\n\n![](images/16_Containers_6_dont.svg)\n\n</DoDontExample>\n</Column>\n</Row>\n<Row>\n<Column colMd={4} colLg={4}>\n<DoDontExample type=\"do\" caption=\"Do always optically center align pictograms in their containers.\">\n\n![](images/16_Containers_7_do.svg)\n\n</DoDontExample>\n</Column>\n<Column colMd={4} colLg={4}>\n<DoDontExample type=\"dont\" caption=\"Don’t crop pictograms in container.\">\n\n![](images/16_Containers_8_dont.svg)\n\n</DoDontExample>\n</Column>\n</Row>\n\n### Clearance\n\nWhen designing with pictograms, all artwork should include minimum padding\nbased on 1/4 of the scaled grid size. The padding can be increased by increments of\n1/4 grid units.\n\n<ArtDirection>\n\n![](images/17_Clearance_1-mobile.svg)\n![](images/17_Clearance_1.svg)\n\n</ArtDirection>\n\n<Caption>Padding starts at the edge of the container shape.</Caption>\n\n<ArtDirection>\n\n![](images/17_Clearance_2-mobile.svg)\n![](images/17_Clearance_2.svg)\n\n</ArtDirection>\n\n<Caption>Padding is the same for both circle and square containers.</Caption>\n\n<ArtDirection>\n\n![](images/17_Clearance_3-mobile.svg)\n![](images/17_Clearance_3.svg)\n\n</ArtDirection>\n\n<Caption>\n  Same spacing rules apply when using pictograms without containers.\n</Caption>\n\n<Row>\n<Column colMd={4} colLg={4}>\n<DoDontExample type=\"do\" caption=\"Do keep pictograms at scale and optically center in container when necessary.\">\n\n![](images/17_Clearance_4_do.svg)\n\n</DoDontExample>\n</Column>\n<Column colMd={4} colLg={4}>\n<DoDontExample type=\"dont\" caption=\"Don’t resize pictograms outside of accepted proportions.\">\n\n![](images/17_Clearance_5_dont.svg)\n\n</DoDontExample>\n</Column>\n</Row>\n\n## Pictograms in Action\n\n<Row>\n<Column colMd={6} colLg={8}>\n\n![Pictogram on Sign](images/18_In-Context_1.jpg)\n\n</Column>\n<Column colMd={6} colLg={4}>\n\n![Pictogram as logo](images/18_In-Context_2.svg)\n\n</Column>\n</Row>\n\n<Row>\n<Column colSm={4} colMd={4} colLg={4}>\n\n![Pictogram on hat](images/18_In-Context_3.jpg)\n\n</Column>\n<Column colSm={4} colMd={4} colLg={4}>\n\n![Pictogram on poster](images/18_In-Context_4.svg)\n\n</Column>\n<Column colSm={4} colMd={4} colLg={4}>\n<Row>\n\n![Pictogram on poster](images/18_In-Context_5.jpg)\n\n</Row>\n<Row>\n\n![Pictogram example](images/18_In-Context_6.svg)\n\n</Row>\n\n</Column>\n</Row>\n\n<Row>\n<Column colMd={6} colLg={8}>\n\n![Pictogram on card](images/18_In-Context_7.svg)\n\n</Column>\n<Column colMd={6} colLg={4}>\n\n![Pictogram on wallpaper](images/18_In-Context_8.jpg)\n\n</Column>\n</Row>\n","fileAbsolutePath":"/fargate/7b444b50/src/pages/guidelines/pictograms/usage.mdx"}}}}