{"componentChunkName":"component---src-pages-guidelines-icons-contribute-mdx","path":"/guidelines/icons/contribute/","webpackCompilationHash":"9a5cb62a61994334ab3f","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":"Icons","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":["Library","Usage","Contribute"]},"relativePagePath":"/guidelines/icons/contribute.mdx","titleType":"prepend","MdxNode":{"id":"b1b07103-57ae-5a70-880a-4285a756da5e","children":[],"parent":"478b95d8-534a-53d0-8b4d-f2390b2dcdf5","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: Icons\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: ['Library', 'Usage', 'Contribute']\n---\n\n\n\nDesign and production guidelines\nMaking an icon\nExporting SVGs\nContribution process\n\n\n\n## Design and production guidelines\n\nDon't see the icon you need in the library? Make your own! Follow these guidelines to ensure visual consistency and proper formatting.\n\n- All icons should be unique and not redundant with any existing icons in the system. Search the [library](/guidelines/icons/library) for the keyword(s) associated with your proposed new icon to ensure that it is not already represented.\n- All icons should adhere to the [IBM Design Language visual style](https://w3.ibm.com/design/language/elements/icons/).\n- All icons should comply with IBM [accessibility standards](/guidelines/accessibility/overview).\n- All icons should be usable across all supported platforms and devices.\n- All icons should be understandable by a global audience of users, regardless of nationality or language.\n\n## Making an icon\n\n- Create a 16 x 16 or 32 x 32 px artboard for each icon.\n- 16 px icons should have 1 px padding. 32 px icons should have 2 px padding.\n- Set your workspace up from the start to snap to pixels and round values to whole pixels to avoid correcting shapes later.\n- Never use center borders. Centering can cause half pixels.\n- Avoid using the line tool; use the rectangle tool instead. The line tool will place the vector on half pixels.\n- Be aware of automatic alignments which can place vectors on uneven or half pixels.\n- Ungroup icon layers completely. The icon should be on the top-most layer in your artboard.\n- Make sure to properly name layers and artboards _(these names will also be exported into the code)_.\n- Review the [icon master file](https://github.com/carbon-design-system/carbon/tree/master/packages/icons/master) to see these guidelines in practice.\n\n### Production-ready\n\nTo be considered production-ready, all icon submissions must be delivered in SVG format at 16 x 16 px (for integration with Carbon components) or 32 x 32 (for service icons).\n\n- Icons should be at whole pixels. No decimals are allowed in x and y coordinates or width and height fields.\n- Each artboard and the artwork within it must be aligned to the pixel grid.\n- All strokes must be expanded and at full pixel values.\n- All possible shapes and paths should be combined.\n\n## Exporting SVGs\n\n### Export SVGs from Sketch\n\n1. Draw a 16 x 16 or 32 x 32 px artboard. 16 px icons should have 1 px padding. 32 px icons should have 2 px padding.\n2. Place the icon squarely on the artboard, making sure it's aligned to the pixel grid.\n3. Convert all strokes to outlines `(Shift + ⌘ + O)`\n4. Select any overlapping shapes and click the Union icon from the top navigation to merge all of the shapes together.\n5. Make sure the icon is at `#000000` and has no additional styling.\n6. Select the entire artboard (not just the icon).\n7. Click `Make Exportable` at the bottom of the right toolbar in Sketch.\n8. In the `Export` widget select \"SVG\" in the format dropdown.\n9. Click `Export 'Artboard-Name'`.\n10. Name icon with the `#name--modifier` convention _(i.e._ `copy.svg`, `copy--glyph.svg`, `add.svg`, `add--glyph.svg`).\n\n### Export SVGs from Adobe Illustrator\n\n1. Draw a 16 x 16 or 32 x 32 px artboard. 16 px icons should have 1 px padding. 32 px icons should have 2 px padding.\n2. Place the icon squarely on the artboard, making sure it's aligned to the pixel grid.\n3. Expand all strokes `Object` → `Expand`.\n4. Select all overlapping shapes and click the \"Unite\" icon in the Pathfinder panel to merge all of the shapes together.\n5. Make sure the icon is at `#000000` and has no additional styling.\n6. Select `File` → `Save a Copy...` from the top navigation.\n7. On the `Format` dropdown select \"SVG.\"\n8. Below `Format` select `Use Artboard`, then select either all or a range of artboards, depending on your need.\n9. Click `Save`.\n10. The `SVG Options` dialog will then open.\n11. Make sure the preferences are the same as in the image below.\n\n\n\n## Contribution process\n\nWould your icon be useful for other products? If so, please consider contributing to the design system.\n\nTo submit, open a pull request with your icon in the [carbon-icons](https://github.com/carbon-design-system/carbon/tree/master/packages/icons) repository.\n","type":"Mdx","contentDigest":"191f9db185262a9ef24ac3cc573542e2","counter":1282,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"Icons","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":["Library","Usage","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: Icons\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: ['Library', 'Usage', 'Contribute']\n---\n\n\n\nDesign and production guidelines\nMaking an icon\nExporting SVGs\nContribution process\n\n\n\n## Design and production guidelines\n\nDon't see the icon you need in the library? Make your own! Follow these guidelines to ensure visual consistency and proper formatting.\n\n- All icons should be unique and not redundant with any existing icons in the system. Search the [library](/guidelines/icons/library) for the keyword(s) associated with your proposed new icon to ensure that it is not already represented.\n- All icons should adhere to the [IBM Design Language visual style](https://w3.ibm.com/design/language/elements/icons/).\n- All icons should comply with IBM [accessibility standards](/guidelines/accessibility/overview).\n- All icons should be usable across all supported platforms and devices.\n- All icons should be understandable by a global audience of users, regardless of nationality or language.\n\n## Making an icon\n\n- Create a 16 x 16 or 32 x 32 px artboard for each icon.\n- 16 px icons should have 1 px padding. 32 px icons should have 2 px padding.\n- Set your workspace up from the start to snap to pixels and round values to whole pixels to avoid correcting shapes later.\n- Never use center borders. Centering can cause half pixels.\n- Avoid using the line tool; use the rectangle tool instead. The line tool will place the vector on half pixels.\n- Be aware of automatic alignments which can place vectors on uneven or half pixels.\n- Ungroup icon layers completely. The icon should be on the top-most layer in your artboard.\n- Make sure to properly name layers and artboards _(these names will also be exported into the code)_.\n- Review the [icon master file](https://github.com/carbon-design-system/carbon/tree/master/packages/icons/master) to see these guidelines in practice.\n\n### Production-ready\n\nTo be considered production-ready, all icon submissions must be delivered in SVG format at 16 x 16 px (for integration with Carbon components) or 32 x 32 (for service icons).\n\n- Icons should be at whole pixels. No decimals are allowed in x and y coordinates or width and height fields.\n- Each artboard and the artwork within it must be aligned to the pixel grid.\n- All strokes must be expanded and at full pixel values.\n- All possible shapes and paths should be combined.\n\n## Exporting SVGs\n\n### Export SVGs from Sketch\n\n1. Draw a 16 x 16 or 32 x 32 px artboard. 16 px icons should have 1 px padding. 32 px icons should have 2 px padding.\n2. Place the icon squarely on the artboard, making sure it's aligned to the pixel grid.\n3. Convert all strokes to outlines `(Shift + ⌘ + O)`\n4. Select any overlapping shapes and click the Union icon from the top navigation to merge all of the shapes together.\n5. Make sure the icon is at `#000000` and has no additional styling.\n6. Select the entire artboard (not just the icon).\n7. Click `Make Exportable` at the bottom of the right toolbar in Sketch.\n8. In the `Export` widget select \"SVG\" in the format dropdown.\n9. Click `Export 'Artboard-Name'`.\n10. Name icon with the `#name--modifier` convention _(i.e._ `copy.svg`, `copy--glyph.svg`, `add.svg`, `add--glyph.svg`).\n\n### Export SVGs from Adobe Illustrator\n\n1. Draw a 16 x 16 or 32 x 32 px artboard. 16 px icons should have 1 px padding. 32 px icons should have 2 px padding.\n2. Place the icon squarely on the artboard, making sure it's aligned to the pixel grid.\n3. Expand all strokes `Object` → `Expand`.\n4. Select all overlapping shapes and click the \"Unite\" icon in the Pathfinder panel to merge all of the shapes together.\n5. Make sure the icon is at `#000000` and has no additional styling.\n6. Select `File` → `Save a Copy...` from the top navigation.\n7. On the `Format` dropdown select \"SVG.\"\n8. Below `Format` select `Use Artboard`, then select either all or a range of artboards, depending on your need.\n9. Click `Save`.\n10. The `SVG Options` dialog will then open.\n11. Make sure the preferences are the same as in the image below.\n\n\n\n## Contribution process\n\nWould your icon be useful for other products? If so, please consider contributing to the design system.\n\nTo submit, open a pull request with your icon in the [carbon-icons](https://github.com/carbon-design-system/carbon/tree/master/packages/icons) repository.\n","fileAbsolutePath":"/tmp/35443907/src/pages/guidelines/icons/contribute.mdx"}}}}