Icons are visual symbols used to represent ideas, objects, or actions. They communicate messages at a glance, draw attention to important information, and can be interactive. Used effectively, icons help to reduce cognitive load so users can focus on their tasks.
We trust product designers to make the best decisions for their products, including where to use icons and where not to use icons.
However, we encourage the following:
- Use icons in contexts that are beneficial to the user experience. If a design isn't better with the icon, the icon isn't needed.
- Avoid unnecessary icon use, particularly in dense contexts.
Actionable icons represent and contextualize an action users take. Examples include:
- The external-link icon after a link explains the link opens another site.
- The chevron-down icon on a select component triggers a dropdown menu when clicked.
Informative icons contextualize function of the UI. For example:
- The lock icon preceding a locked function.
Our icons are carefully designed to have consistent stroke weights, corner radii, and proportions.
Odyssey icons are 16x16px. They should not be resized.
Our system icon style is stroked (outlined).
Exceptions can be made if the icon recedes against a colored background. In these cases, filled icons are used. See Callout
Icons are always a solid, monochromatic color and need to pass the same color contrast ratio as typography (4.5:1).
- When used with text, icons inherit the color of the text, which is Gray 900.
- If text uses semantic color, like blue for links or red for errors, the icon will inherit the appropriate color.
When used with text, icons are centered vertically.
Since there are very few icons that are universally understood, it’s best practice for usability and accessibility to include a label for every icon.
- When an icon includes a label, don’t use an aria-label to avoid repetition.
For the few universal icons that don’t require a label (delete, settings, and search), an aria-label needs to be included.
Always consider icons from a global perspective.
Icons that have been used for a long time worldwide have a higher chance of being recognized and understood quickly. There are global, established conventions for concepts like delete, settings, and search.
Work with the globalization team when you need to use country-specific icons. For example, a checkmark means correct or OK in the U.S. and U.K. but in Japan, it means error or incorrect. In Japan, a bullseye character would be used for excellent or correct. See Internationalization.
Icons must meet these standards:
- Is beneficial to the user experience
- Isn't redundant to or better solved by an existing icon
- Is a simple verb or noun — not a verb + noun combination. For example, add not add user.
If your icon meets these standards, submit your request to the Odyssey Jira board.
Oktanauts can use the following resources when building with Odyssey:
- Check the Odyssey 1.0 FAQs.
- Join #odyssey in Slack to ask questions and stay up to date about the design system.
- Attend Odyssey Office Hours on Mondays and Wednesdays from 1-1:30 p.m. PT / 4-4:30 p.m. ET.
- Submit feature requests to the Odyssey Jira board.