{"componentChunkName":"component---src-pages-guidelines-iconography-usage-mdx","path":"/guidelines/iconography/usage/","webpackCompilationHash":"aaa6c4cbb44f8ca938e9","result":{"pageContext":{"isCreatedByStatefulCreatePages":true,"frontmatter":{"label":"Icons are visual symbols used to represent ideas, objects, or actions. They communicate messages at a glance, afford interactivity, and draw attention to important information.","title":"Iconography","description":"Icons are visual symbols used to represent ideas, objects, or actions. They communicate messages at a glance, afford interactivity, and draw attention to important information.","tabs":["Usage","Library","Contribute"]},"relativePagePath":"/guidelines/iconography/usage.mdx","titleType":"prepend","MdxNode":{"id":"8d1a3a6c-81d9-518c-9752-d31bc34e1add","children":[],"parent":"f69cf157-a70a-50ea-b176-c7c9f3417a8e","internal":{"content":"---\nlabel: Icons are visual symbols used to represent ideas, objects, or actions. They communicate messages at a glance, afford interactivity, and draw attention to important information.\ntitle: Iconography\ndescription: Icons are visual symbols used to represent ideas, objects, or actions. They communicate messages at a glance, afford interactivity, and draw attention to important information.\ntabs: ['Usage', 'Library', 'Contribute']\n---\n\n### Icons are visual symbols used to represent ideas, objects, or actions. They communicate messages at a glance, afford interactivity, and draw attention to important information.\n\n## Resources\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## Designing with icons\n\n### Sizing\n\nCarbon components typically use icons on 16px artboards. Icons on 20px, 24px, and 32px artboards can also be used within the UI. Be sure icon size is consistent throughout your product.\n\n\n\n\n\n\n 16px and 20px icons are optimized to feel balanced when paired with 14pt and\n 16pt IBM Plex. Use 24px and 32px when larger icons are needed.\n\n\n\n\n \n\n\n\n \n\n\n \n\n\n\n \n\n
\n\n### Touch targets\n\nAll touch targets for interactive icons need to be 44px or larger. Developers can add padding to a touch target with CSS to meet the 44px requirement.\n\n\n\n\n The menu button that is also a touch target may have a 20px ✕ 20px icon\n centered in a 48px ✕ 48px button.\n\n\n### Color\n\nIcons are always a solid, monochromatic color and need to 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 on color, see the [Color guidelines](/guidelines/color).\n\nIt's also important to note that Carbon v10 icons themselves do not have interaction states, only their backgrounds do.\n\n\n\n \n\n\n\n \n\n\n \n\n\n\n \n\n
\n\n### Alignment\n\nWhen used next to text, icons should be center-aligned.\n\n\n\n \n\n\n\n \n\n\n \n\n\n\n \n\n
\n\n## Developing with icons\n\n### SVG Icons\n\n#### Requirements:\n\nInstall `carbon-icons`.\n\nFull installation details can be found in the Carbon icons [GitHub repo](https://github.com/carbon-design-system/carbon-icons).\n\n### Main files\n\n`carbon-icons` ships with two main SVG files:\n\n| Filename | Description | Supported versions |\n| ------------------- | ------------------------------------------------------------------------------------------------------- | ------------------ |\n| _carbon-icons.svg_ | Contains current icons (consolidated subset of legacy icons used in IBM Bluemix) | `3.x` & newer |\n| _carbon-icons.json_ | JSON file created from carbon-icons.svg, used in [Carbon](/guidelines/iconography/library) | `3.x` & newer |\n| _carbon-icons.js_ | JS module created from carbon-icons.svg, used in `Icon` React Component in [carbon-components-react](#) | `3.x` & newer |\n| _icons.json_ | legacy JSON file created from sprite.svg | `1.x`,`2.x`&`3.x` |\n| _legacy-icons.js_ | JS module created from sprite.svg | `3.x` only |\n\n### Accessibility\n\nFor screen reader accessibility, provide a context-rich title for the SVG using `` element.\n\n```html\n<svg>\n <title>Add a new service\n \n\n```\n\nIf support for older browsers is needed, use the `aria-labelledby` attribute to reference the `` element using an `id`.\n\nThe `<title>` element will be read by the screen reader to the user, so it should describe its purpose.\n\nMake sure that you do not duplicate this `id`.\n\n```html\n<svg aria-labelledby=\"add\">\n <title id=\"add\">Add a new service\n \n\n```\n\n#### For more details on accessibility, see the following resources:\n\n
\n\n- \"Accessible SVGs\" via [CSS-Tricks](https://css-tricks.com/accessible-svgs/)\n- \"5.4 The 'desc' and 'title' elements\" via [W3C.org](https://www.w3.org/TR/SVG11/struct.html#DescriptionAndTitleElements)\n","type":"Mdx","contentDigest":"08122ca599c2f0bd5c2d6e72efe274c5","counter":1213,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"Iconography","label":"Icons are visual symbols used to represent ideas, objects, or actions. They communicate messages at a glance, afford interactivity, and draw attention to important information.","description":"Icons are visual symbols used to represent ideas, objects, or actions. They communicate messages at a glance, afford interactivity, and draw attention to important information.","tabs":["Usage","Library","Contribute"]},"exports":{},"rawBody":"---\nlabel: Icons are visual symbols used to represent ideas, objects, or actions. They communicate messages at a glance, afford interactivity, and draw attention to important information.\ntitle: Iconography\ndescription: Icons are visual symbols used to represent ideas, objects, or actions. They communicate messages at a glance, afford interactivity, and draw attention to important information.\ntabs: ['Usage', 'Library', 'Contribute']\n---\n\n### Icons are visual symbols used to represent ideas, objects, or actions. They communicate messages at a glance, afford interactivity, and draw attention to important information.\n\n## Resources\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## Designing with icons\n\n### Sizing\n\nCarbon components typically use icons on 16px artboards. Icons on 20px, 24px, and 32px artboards can also be used within the UI. Be sure icon size is consistent throughout your product.\n\n\n\n\n\n\n 16px and 20px icons are optimized to feel balanced when paired with 14pt and\n 16pt IBM Plex. Use 24px and 32px when larger icons are needed.\n\n\n\n\n \n\n\n\n \n\n\n \n\n\n\n \n\n
\n\n### Touch targets\n\nAll touch targets for interactive icons need to be 44px or larger. Developers can add padding to a touch target with CSS to meet the 44px requirement.\n\n\n\n\n The menu button that is also a touch target may have a 20px ✕ 20px icon\n centered in a 48px ✕ 48px button.\n\n\n### Color\n\nIcons are always a solid, monochromatic color and need to 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 on color, see the [Color guidelines](/guidelines/color).\n\nIt's also important to note that Carbon v10 icons themselves do not have interaction states, only their backgrounds do.\n\n\n\n \n\n\n\n \n\n\n \n\n\n\n \n\n
\n\n### Alignment\n\nWhen used next to text, icons should be center-aligned.\n\n\n\n \n\n\n\n \n\n\n \n\n\n\n \n\n
\n\n## Developing with icons\n\n### SVG Icons\n\n#### Requirements:\n\nInstall `carbon-icons`.\n\nFull installation details can be found in the Carbon icons [GitHub repo](https://github.com/carbon-design-system/carbon-icons).\n\n### Main files\n\n`carbon-icons` ships with two main SVG files:\n\n| Filename | Description | Supported versions |\n| ------------------- | ------------------------------------------------------------------------------------------------------- | ------------------ |\n| _carbon-icons.svg_ | Contains current icons (consolidated subset of legacy icons used in IBM Bluemix) | `3.x` & newer |\n| _carbon-icons.json_ | JSON file created from carbon-icons.svg, used in [Carbon](/guidelines/iconography/library) | `3.x` & newer |\n| _carbon-icons.js_ | JS module created from carbon-icons.svg, used in `Icon` React Component in [carbon-components-react](#) | `3.x` & newer |\n| _icons.json_ | legacy JSON file created from sprite.svg | `1.x`,`2.x`&`3.x` |\n| _legacy-icons.js_ | JS module created from sprite.svg | `3.x` only |\n\n### Accessibility\n\nFor screen reader accessibility, provide a context-rich title for the SVG using `` element.\n\n```html\n<svg>\n <title>Add a new service\n \n\n```\n\nIf support for older browsers is needed, use the `aria-labelledby` attribute to reference the `` element using an `id`.\n\nThe `<title>` element will be read by the screen reader to the user, so it should describe its purpose.\n\nMake sure that you do not duplicate this `id`.\n\n```html\n<svg aria-labelledby=\"add\">\n <title id=\"add\">Add a new service\n \n\n```\n\n#### For more details on accessibility, see the following resources:\n\n
\n\n- \"Accessible SVGs\" via [CSS-Tricks](https://css-tricks.com/accessible-svgs/)\n- \"5.4 The 'desc' and 'title' elements\" via [W3C.org](https://www.w3.org/TR/SVG11/struct.html#DescriptionAndTitleElements)\n","fileAbsolutePath":"/tmp/42b44a0/src/pages/guidelines/iconography/usage.mdx"}}}}