Digital Experience Guidelines

Iconography

Our icon system utilizes the Remix Icon library: https://remixicon.com, which was selected for two key reasons:

Our brand representation: The Remix Icons are clear, minimalistic icons that complement our sophisticated but simple design. The thin lines, paired with slightly rounded edges communicate an approachability that is inherent to our brand personality. Their legibility and accessibility: The simplicity and universality of the icons in this library makes them easily understandable to a wide range of users without requiring them to spend too much time considering an icon's meaning.

The icons should make sense on their own while representing the brand. We have 4 sizes: 12, 16, 20, 24 using 2px line icons with sharp shapes with an occasional use of rounded corners. All icons need to fit the pixel grid for better legibility on every screen.

Where possible, use existing, universally recognizable symbols from the library before creating new icons or symbols to ensure clarity of message and consistency in our icon library. Bespoke icons can be created if they don't exist yet.

Sample Line Icons

Icon design guidelines

Create meaningful icons

• Reach clarity by using the least amount of shapes/lines
• Use clear and well-known methaphors
• Use geometric and simple shapes to create help scannability
• Use outlines rather than filled shapes

Create precise icons

• Align shapes to the pixel grid for better shape definition on low-density pixel screens
• Use enough space between shapes (2px when possible) to create clear icons
• Use 2px lines on 24px icons (1px line can be used exceptionally)
• Use subtle round corners (not more than 2px) and sharp lines and angles (clean 45, 30, 60 deg angles) to be consistent with the ADI brand
• Use the shapes guides of the custom icon template below to create your icons but make sure to create well-balanced visuals rather than sticking exactly to the guidelines.
• Do not use the 2px trim area (2px padding around the icon) for icon design. Exceptional cases may apply (see example below)

Custom icon template

Use the icon grid below to create bespoke icons. Use the base shapes to create the foundation of your bespoke icon. You can also find the closest Remix icon and modify it according to your needs.

Use the shape guides to create a well-balanced icon.

Icon Grid (M)

 

Basic Shapes (M)

 

Examples (M)

 

Best Practices

Do's

• Ensure that icons use the ratio of 4.5:1 contrast between icon color and background color
• When possible, icons should be accompanied with text to communicate meaning
• A minimum touch target area of 40px is recommended for standalone icons
• Icons can be used to draw attention and create visual hierarchy

Dont's

• Icons should never be resized, decorative icons are an exception
• Actionable icons should never appear in a different color that the accompanied text