{
"componentChunkName": "component---src-pages-iconography-ui-icons-usage-mdx",
"path": "/iconography/ui-icons/usage/",
"result": {"pageContext":{"frontmatter":{"title":"UI icons","description":"Icons are important aids to the user experience. Employ icons strategically with careful view to sizing, alignment, clearance and color in usage.","tabs":["Library","Design","Usage","Contribute"]},"relativePagePath":"/iconography/ui-icons/usage.mdx","titleType":"append","MdxNode":{"id":"20e11c92-b67d-5a2a-9eaa-d23697c48b2d","children":[],"parent":"e45a0485-a425-5c9c-b01c-83dc52f725e8","internal":{"content":"---\ntitle: UI icons\ndescription:\n Icons are important aids to the user experience. Employ icons strategically\n with careful view to sizing, alignment, clearance and color in usage.\ntabs: [Library, Design, Usage, Contribute]\n---\n\nimport Carousel from \"../../../components/Carousel\"\n\n\n\nIconography is highly functional in a user interface. When used wisely, icons become an elegant, yet efficient, way to communicate with and help guide a user through an experience. To maintain this functionality, it’s important to reduce cognitive load on users by employing icons sparingly and strategically throughout your designs.\n\n\n\n\n\n\n Sizing\n Alignment\n Clearance\n Color\n\n\n\n\n\n Third-party UI icons\n UI icons in action\n\n\n
\n\n## Sizing\n\nIcons have been designed to work best in four sizes: 16px, 20px, 24px and 32px. Be sure to use icons at their originally produced size. These icons are provided in SVG format or can be used directly from the Figma, Carbon and IBM Design Language libraries.\n\n| Icon size | Stroke width | Padding | Live area | Corner radius | Type sizes |\n| --------------------------------------------- | ------------ | ------- | --------- | ------------- | ---------- |\n| 32px | 2px | 2px | 28px | 2px | — |\n| 24px | 1.5px | 1.5px | 21px | 1.5px | — |\n| | 1.25px | 1.25px | 17.5px | 1.25px | 16pt |\n| | 1px | 1px | 14px | 1px | 14pt |\n\n\n \n \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## Alignment\n\nIcons are optically aligned to the center of the icon grid within the boundary box. Centering ensures all icons will be aligned correctly when exported and used side by side in a line or a row. Visually center an icon where the visual weight is heaviest. In some situations, mechanically centering doesn’t work.\n\n\n\n\n\n\n\n\n\n## Clearance\n\nWhen designing icons for touch surfaces, all targets should be 44px or greater. The icon can be smaller than 44px if padding is added to the touch target with cascading style sheets (CSS) to meet the 44px minimum.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## Color\n\nIcons are always a solid, monochromatic color and must pass the same color contrast ratio as typography (4.5:1). The color of the icon should reflect the importance of the icon’s action, which should always be to help guide a user. For more information about color, see [Color in UI](https://carbondesignsystem.com/elements/icons/usage/#color).\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## Third-party UI icons\n\nThird-party UI icons require permission from that third party before the icon can be used and added to our libraries. Requestors are responsible for securing permission. These icons may come in various styles and formats and must not be visually altered. However, they should be visually balanced with existing IBM UI icons to ensure consistency within interfaces.\n\n\n\n### Alignment\n\nWhile most third-party icons don’t align perfectly to the icon grid, it’s important to align any icon artwork to the grid as best as possible. Center and align edges to grid divisions while respecting icon padding guidelines.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## UI icons in action\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n","type":"Mdx","contentDigest":"05a67f8b9d03a59ae41601f9733015c5","owner":"gatsby-plugin-mdx","counter":1940},"frontmatter":{"title":"UI icons","description":"Icons are important aids to the user experience. Employ icons strategically with careful view to sizing, alignment, clearance and color in usage.","tabs":["Library","Design","Usage","Contribute"]},"exports":{},"rawBody":"---\ntitle: UI icons\ndescription:\n Icons are important aids to the user experience. Employ icons strategically\n with careful view to sizing, alignment, clearance and color in usage.\ntabs: [Library, Design, Usage, Contribute]\n---\n\nimport Carousel from \"../../../components/Carousel\"\n\n\n\nIconography is highly functional in a user interface. When used wisely, icons become an elegant, yet efficient, way to communicate with and help guide a user through an experience. To maintain this functionality, it’s important to reduce cognitive load on users by employing icons sparingly and strategically throughout your designs.\n\n\n\n\n\n\n Sizing\n Alignment\n Clearance\n Color\n\n\n\n\n\n Third-party UI icons\n UI icons in action\n\n\n
\n\n## Sizing\n\nIcons have been designed to work best in four sizes: 16px, 20px, 24px and 32px. Be sure to use icons at their originally produced size. These icons are provided in SVG format or can be used directly from the Figma, Carbon and IBM Design Language libraries.\n\n| Icon size | Stroke width | Padding | Live area | Corner radius | Type sizes |\n| --------------------------------------------- | ------------ | ------- | --------- | ------------- | ---------- |\n| 32px | 2px | 2px | 28px | 2px | — |\n| 24px | 1.5px | 1.5px | 21px | 1.5px | — |\n| | 1.25px | 1.25px | 17.5px | 1.25px | 16pt |\n| | 1px | 1px | 14px | 1px | 14pt |\n\n\n \n \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## Alignment\n\nIcons are optically aligned to the center of the icon grid within the boundary box. Centering ensures all icons will be aligned correctly when exported and used side by side in a line or a row. Visually center an icon where the visual weight is heaviest. In some situations, mechanically centering doesn’t work.\n\n\n\n\n\n\n\n\n\n## Clearance\n\nWhen designing icons for touch surfaces, all targets should be 44px or greater. The icon can be smaller than 44px if padding is added to the touch target with cascading style sheets (CSS) to meet the 44px minimum.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## Color\n\nIcons are always a solid, monochromatic color and must pass the same color contrast ratio as typography (4.5:1). The color of the icon should reflect the importance of the icon’s action, which should always be to help guide a user. For more information about color, see [Color in UI](https://carbondesignsystem.com/elements/icons/usage/#color).\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## Third-party UI icons\n\nThird-party UI icons require permission from that third party before the icon can be used and added to our libraries. Requestors are responsible for securing permission. These icons may come in various styles and formats and must not be visually altered. However, they should be visually balanced with existing IBM UI icons to ensure consistency within interfaces.\n\n\n\n### Alignment\n\nWhile most third-party icons don’t align perfectly to the icon grid, it’s important to align any icon artwork to the grid as best as possible. Center and align edges to grid divisions while respecting icon padding guidelines.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## UI icons in action\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n","fileAbsolutePath":"/home/runner/work/design-language-website/design-language-website/src/pages/iconography/ui-icons/usage.mdx"}}},
"staticQueryHashes": ["1364590287","137577622","2102389209","2456312558","2746626797","2881613939","3037994772","768070550"]}