Iconography

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.

General use

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.

Do

Use icons when they are beneficial to the user experience.

Don't

Use icons for unnecessary decoration.

Do

Provide adequate spacing for icons in contexts that warrant and benefit from their use.

Don't

Use icons in icons in ways that cluttered and lack sufficient spacing, as this can cause visual noise and slow down cognition.

Types of icons

Actionable

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

Informative icons contextualize function of the UI. For example:

• The lock icon preceding a locked function.

Icon specifications

Our icons are carefully designed to have consistent stroke weights, corner radii, and proportions.

Size

Odyssey icons are 16x16px. They should not be resized.

Don't

Don't arbitrarily scale icons up or down to fit your designs. This can cause the proportions to be off-balance and can create unintended hierarchy within the experience.

Style

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

Color

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.

Alignment

When used with text, icons are centered vertically.

Accessibility

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.

Internationalization

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.

Request an icon

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.

Have questions or need support?

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.