UI icons
When a new UI icon is needed, refer to the design and production guidelines outlined here to create it. Learn about the contribution and approval process required to add it to the official UI icon library.
Resources
Design and production
Don’t see the icon you need in the library? Then make your own. Follow these guidelines to ensure visual consistency and proper formatting.
All design submissions require review and approval before they can be published. Try your best to adhere to these guidelines, but note that your submitted design may change during the review and approval process.
Non-designers may submit requests using a visual reference or sketch of their desired icon, and the brand team will assist with the design. Include context about where and how the icon will be used to help ensure that the final design meets your needs.
- Be unique and not redundant with any existing icons in the system. Search the library for the keyword or keywords associated with your proposed new icon to ensure that it’s not already represented.
- All UI icons should adhere to the IBM Design Language visual style.
- All UI icons should comply with IBM accessibility standards.
- All UI icons should be usable across all supported platforms and devices.
- All UI icons should be understandable by a global audience of users, regardless of nationality or language.
Creating a UI icon
Keep the following in mind when creating a UI icon:
- Use the starter file and create the desired icon within the blank workspace artboards. Refer to the Design tab for detailed guidance.
- Make sure 32px icons have 2px of padding.
- Set your workspace up from the start to snap to pixels and round values to whole pixels to avoid correcting shapes later.
- Never use center borders. Centering can cause half pixels.
- Avoid using the line tool; use the rectangle tool instead. The line tool will place the vector on half pixels.
- Be aware of automatic alignments, which can place vectors on uneven or half pixels.
- Ungroup icon layers completely. The icon should be on the top-most layer in your artboard.
- Make sure to properly name layers and artboards. These names will also be exported into the code.
Production-ready
To be considered production-ready, all icon submissions must be delivered in SVG format at 32px x 32px for integration with Carbon components. You can design your icon using the Adobe Illustrator starter file provided in the Resources section.
- Icons should be at whole pixels. No decimals are allowed in x and y coordinates or in width and height fields.
- Each artboard and the artwork within it must be aligned to the pixel grid.
- All strokes must be expanded and contain full pixel values.
- All possible shapes and paths should be combined.
Approval process
After following this guidance, you may submit your icon design draft for approval. The Brand and Design Systems team will review these icons and facilitate their publication in the IBM Design Language, Figma and Carbon libraries. These libraries are updated in sprints, not when the icon is approved, so you should account for that additional time in your project planning.
- Submit your first design draft using one of the GitHub issue types, single, batch or update, linked at the bottom of this page. Follow the instructions in the issue to avoid possible delays in the review process.
Note: Non-designers can submit visual references or sketches with context about how the icon will appear, in lieu of a design file. - The Brand and Design Systems team will review your submitted design and provide recommendations and design feedback within the GitHub issue.
This review process can take up to 30 days from issue creation, depending on the number of icons submitted. - When your submission is approved, your finalized icon will be provided for immediate use in SVG format then moved into a production sprint, after which it appear in the Carbon, IBM Design Language and Figma libraries.