{
    "componentChunkName": "component---src-pages-iconography-overview-mdx",
    "path": "/iconography/overview/",
    "result": {"pageContext":{"frontmatter":{"title":"Overview","description":"Iconography overview page"},"relativePagePath":"/iconography/overview.mdx","titleType":"append","MdxNode":{"id":"15ee8a1f-06cc-5d9a-aa6c-e093ce3f8d77","children":[],"parent":"65c8f35d-e8a0-55de-984a-e03beaf26ff9","internal":{"content":"---\ntitle: Overview\ndescription: Iconography overview page\n---\n\nimport { exampleSection } from '../../styles/Grid.module.scss';\n\nimport v281513611 from '../../videos/vimeo/281513611.mp4';\nimport p281513611 from '../../videos/vimeo/281513611.jpg';\n\n\n<PageDescription>\n\nIconography consists of visual symbols that represent ideas, objects or narratives. Icons can convey messages at a glance, enable interactivity and simplify complex concepts. IBM has three iconography types for various use cases: UI icons, app icons and pictograms.\n\n</PageDescription>\n\n<AnchorLinks>\n    <AnchorLink>The icon system</AnchorLink>\n    <AnchorLink>Principles</AnchorLink>\n    <AnchorLink>Icon types</AnchorLink>\n</AnchorLinks>\n\n<video src={v281513611} controls preload=\"metadata\" style={{width: \"100%\"}} poster={p281513611} />\n\n## The icon system\n\nWe use a versatile icon system that meets a broad range of needs, from functional UI elements to expressive visuals for editorial use. Each icon is crafted for visual consistency across digital and print, balancing clarity with character. This flexibility ensures the system supports both interface usability and storytelling, adapting in tone and detail to suit the medium.\n\n![](./images/02-idl-iconography-overview-v2.png)\n\n\n## Principles\n\nIBM has a distinct perspective on iconography, supported by a carefully crafted set of principles and best practices. Our icons are designed to be precise, clear, adaptable, inclusive and visually engaging, contributing to the best possible user experience. These principles reflect the core ideas that define the IBM approach to icon design and ensure effectiveness across sizes, contexts and platforms.\n\n<Row className={exampleSection}>\n<Column colMd={3} colLg={3}>\n\n### Engineered\n\n</Column>\n<Column colMd={8} colLg={8}>\n\nIBM icons should feel precise and balanced. Careful use of the grid, along with consistent shapes, angles and corner radius, creates a distinct aesthetic that reflects our thoughtful, systematic design approach.\n\n</Column>\n</Row>\n<Row className={exampleSection}>\n<Column colMd={3} colLg={3}>\n\n### Clear\n\n</Column>\n<Column colMd={8} colLg={8}>\n\nIBM icons should never feel overworked or overloaded with ideas. Only essential, purposeful elements should be used to clearly communicate the core concept. Keeping icons simple and focused enhances clarity and ensures they effectively guide users through complex actions or information.\n\n</Column>\n</Row>\n<Row className={exampleSection}>\n<Column colMd={3} colLg={3}>\n\n### Nimble\n\n</Column>\n<Column colMd={8} colLg={8}>\n\nIBM icons should convey a sense of ease, lightness and nimbleness. This approach to composition, spacing, weight and balance helps users quickly grasp complex information, making the icons more engaging and dynamic.\n\n</Column>\n</Row>\n<br />\n\n## Icon types\n\nGiven our scale and scope, no single icon style can capture the full range of concepts and functions that we need to represent. Specific use cases and contexts can require different styles of icons. Use pictograms to represent broad concepts or categories, UI icons for functional actions within interfaces, and app icons for product or tool identification; each serves a distinct purpose to ensure clarity and consistency across experiences. We’ve developed a clear perspective on the iconographic approaches that best reflect IBM’s identity, both in style and substance.\n\n### UI icons\n\n[IBM user interface (UI) icons](./ui-icons/design) represent ideas, objects or actions and appear throughout digital interfaces to guide users, enhance usability and save space. They’re commonly used in navigation menus, action buttons, forms, toolbars and media controls, helping users identify actions quickly. There may be instances when these small bold elements are useful in other materials to represent a product.\n\n<Column colMd={8} colLg={8} noGutterSm>\n\n![](./images/03-idl-iconography-overview.png)\n\n</Column>\n\n### App icons\n\n[IBM app icons](./app-icons/design) are primarily used to identify a product in catalogs and within desktop or mobile environments. They follow the same usage conventions as IBM UI icons when used across product and web platforms, ensuring visual consistency. However, differences arise when they’re used in native OS applications and app store environments. They may be used for large-scale, expressive moments—such as when highlighting a specific product at an event or during a keynote presentation.\n\n<Column colMd={8} colLg={8} noGutterSm>\n\n![](./images/04-idl-iconography-overview.png)\n\n</Column>\n\n### Pictograms\n\n[IBM pictograms](./pictograms/design) represent simplified, symbolic images used by IBM employees in most use cases, from presentations and marketing materials when speaking about a feature or function of a specific product, to web pages, merchandise, posters and signage. They also work well as large elements in graphic moments or subtle backgrounds.\n\nPictograms are offered in two types: productive and expressive. The standard productive pictograms feature simple linework and are the go-to pictogram type for most contexts, while the more dynamic expressive pictograms work best for select use cases where more visual impact is needed.\n\n<Column colMd={8} colLg={8}>\n<Tabs>\n<Tab label='Productive'>\n\n![](./images/05-idl-iconography-overview.png)\n\n</Tab>\n<Tab label='Expressive'>\n\n![](./images/06-idl-iconography-overview.png)\n\n</Tab>\n</Tabs>\n</Column>","type":"Mdx","contentDigest":"d59d5cce2d366b29a93110e7c905c2f8","owner":"gatsby-plugin-mdx","counter":1912},"frontmatter":{"title":"Overview","description":"Iconography overview page"},"exports":{},"rawBody":"---\ntitle: Overview\ndescription: Iconography overview page\n---\n\nimport { exampleSection } from '../../styles/Grid.module.scss';\n\nimport v281513611 from '../../videos/vimeo/281513611.mp4';\nimport p281513611 from '../../videos/vimeo/281513611.jpg';\n\n\n<PageDescription>\n\nIconography consists of visual symbols that represent ideas, objects or narratives. Icons can convey messages at a glance, enable interactivity and simplify complex concepts. IBM has three iconography types for various use cases: UI icons, app icons and pictograms.\n\n</PageDescription>\n\n<AnchorLinks>\n    <AnchorLink>The icon system</AnchorLink>\n    <AnchorLink>Principles</AnchorLink>\n    <AnchorLink>Icon types</AnchorLink>\n</AnchorLinks>\n\n<video src={v281513611} controls preload=\"metadata\" style={{width: \"100%\"}} poster={p281513611} />\n\n## The icon system\n\nWe use a versatile icon system that meets a broad range of needs, from functional UI elements to expressive visuals for editorial use. Each icon is crafted for visual consistency across digital and print, balancing clarity with character. This flexibility ensures the system supports both interface usability and storytelling, adapting in tone and detail to suit the medium.\n\n![](./images/02-idl-iconography-overview-v2.png)\n\n\n## Principles\n\nIBM has a distinct perspective on iconography, supported by a carefully crafted set of principles and best practices. Our icons are designed to be precise, clear, adaptable, inclusive and visually engaging, contributing to the best possible user experience. These principles reflect the core ideas that define the IBM approach to icon design and ensure effectiveness across sizes, contexts and platforms.\n\n<Row className={exampleSection}>\n<Column colMd={3} colLg={3}>\n\n### Engineered\n\n</Column>\n<Column colMd={8} colLg={8}>\n\nIBM icons should feel precise and balanced. Careful use of the grid, along with consistent shapes, angles and corner radius, creates a distinct aesthetic that reflects our thoughtful, systematic design approach.\n\n</Column>\n</Row>\n<Row className={exampleSection}>\n<Column colMd={3} colLg={3}>\n\n### Clear\n\n</Column>\n<Column colMd={8} colLg={8}>\n\nIBM icons should never feel overworked or overloaded with ideas. Only essential, purposeful elements should be used to clearly communicate the core concept. Keeping icons simple and focused enhances clarity and ensures they effectively guide users through complex actions or information.\n\n</Column>\n</Row>\n<Row className={exampleSection}>\n<Column colMd={3} colLg={3}>\n\n### Nimble\n\n</Column>\n<Column colMd={8} colLg={8}>\n\nIBM icons should convey a sense of ease, lightness and nimbleness. This approach to composition, spacing, weight and balance helps users quickly grasp complex information, making the icons more engaging and dynamic.\n\n</Column>\n</Row>\n<br />\n\n## Icon types\n\nGiven our scale and scope, no single icon style can capture the full range of concepts and functions that we need to represent. Specific use cases and contexts can require different styles of icons. Use pictograms to represent broad concepts or categories, UI icons for functional actions within interfaces, and app icons for product or tool identification; each serves a distinct purpose to ensure clarity and consistency across experiences. We’ve developed a clear perspective on the iconographic approaches that best reflect IBM’s identity, both in style and substance.\n\n### UI icons\n\n[IBM user interface (UI) icons](./ui-icons/design) represent ideas, objects or actions and appear throughout digital interfaces to guide users, enhance usability and save space. They’re commonly used in navigation menus, action buttons, forms, toolbars and media controls, helping users identify actions quickly. There may be instances when these small bold elements are useful in other materials to represent a product.\n\n<Column colMd={8} colLg={8} noGutterSm>\n\n![](./images/03-idl-iconography-overview.png)\n\n</Column>\n\n### App icons\n\n[IBM app icons](./app-icons/design) are primarily used to identify a product in catalogs and within desktop or mobile environments. They follow the same usage conventions as IBM UI icons when used across product and web platforms, ensuring visual consistency. However, differences arise when they’re used in native OS applications and app store environments. They may be used for large-scale, expressive moments—such as when highlighting a specific product at an event or during a keynote presentation.\n\n<Column colMd={8} colLg={8} noGutterSm>\n\n![](./images/04-idl-iconography-overview.png)\n\n</Column>\n\n### Pictograms\n\n[IBM pictograms](./pictograms/design) represent simplified, symbolic images used by IBM employees in most use cases, from presentations and marketing materials when speaking about a feature or function of a specific product, to web pages, merchandise, posters and signage. They also work well as large elements in graphic moments or subtle backgrounds.\n\nPictograms are offered in two types: productive and expressive. The standard productive pictograms feature simple linework and are the go-to pictogram type for most contexts, while the more dynamic expressive pictograms work best for select use cases where more visual impact is needed.\n\n<Column colMd={8} colLg={8}>\n<Tabs>\n<Tab label='Productive'>\n\n![](./images/05-idl-iconography-overview.png)\n\n</Tab>\n<Tab label='Expressive'>\n\n![](./images/06-idl-iconography-overview.png)\n\n</Tab>\n</Tabs>\n</Column>","fileAbsolutePath":"/home/runner/work/design-language-website/design-language-website/src/pages/iconography/overview.mdx"}}},
    "staticQueryHashes": ["1364590287","137577622","2102389209","2456312558","2746626797","2881613939","3037994772","768070550"]}