Usage guidelines

The EDS system icons are built on a copy of the outlined Google Material Design icons provided open-source by Google. The icons have been customised and renamed for Equinor's use and are available in EDS Storybook.

There are more than 700 icons, divided into categories to make them easy to find.

Simple and clear icons require a strict underlying grid. The EDS icons are built on a 24x24px grid. In code, the Icon component sets the size you render them at: its size prop has ten sizes from xs to 6xl, and each size changes with density.

Don't

• System icons are not to be used as product icons or as a favicon

Design

Using system icons in Figma

In the Assets panel, the system icons are grouped under the System icons page of the EDS Assets file (internal Equinor Figma access). Each icon is its own component, named after what it shows.

1. Locate the Assets tab in the Layers Panel.
2. Find the icon you need in one of two ways:
   1. Search for the icon's name.
   2. Open the System icons page and browse its folders.
3. Drag the icon into your frame.
4. Hold Shift when resizing the icon to keep its aspect ratio.

Library

All icons are published in the @equinor/eds-icons package, and you can browse them in Storybook. Render them with the Icon component, which takes the icon through its data prop.

Contribution

Missing a system icon? You can make it following these simple guidelines.

• First make sure that the icon you are missing does not already exist by searching for all associated keywords in the library.
• All icons should be understandable regardless of language or location.

Style

Each icon needs to be reduced to its minimal form, being bold, geometrical and symmetrical. To reflect the rounded corners of the logo, icons need to have rounded corners of 2px where possible; however, internal corners should be square and not rounded. To reflect the brand, icons use a consistent stroke of 2px this includes curves, angles and both interior and exterior strokes. The default icon is outline, a filled icon may be provided only if there is an outlined icon.

The EDS icons are always facing forward and never rotated or dimensional. The icons are made for legibility and are not too literal or complex, neither are they overly playful or bubbly.

Exceptions

Extremely complex shapes sometimes require complex details. The guidelines allow for subtle adjustments that help improve legibility of icons these adjustments are referred to as optical corrections. This exception allows for use of 1.5px internal or external strokes. Using this exception should be avoided if possible.

Making a new icon

• Create an artboard that is 24x24px

  • Place the System icon grid from the Utilities page in the EDS Assets file as the bottom layer and lock it
  • Choose the grid shape: circle, square, vertical rectangle or horizontal rectangle
  • Make sure to align all artwork to the pixel grid

• Never use centre borders, centering can cause half pixels

• Avoid using the line tool, use the rectangle tool instead since the line tool will align to half pixels

• If you end up using borders or the line tool (which is not recommended), make certain to outline (expand) your work

Submitting your new icon

• When your icon has been created, delete the System icon grid layer that you had locked

• Make sure your icon is not grouped or nested

• Make sure all your layers are named logically

• Make sure to name the icon what it is, avoid interpretive names that will make the icon hard to search and find

  • If you make a filled icon to supplement the outlined icon, both icons need to have this stated in their name. For example, add circle filled and add circle outlined.

• Pick a category for the icon to live under. Reference the library for current categories

• Supply a list of alternative names that people might associate with your icon. This will help when searching

Get in touch with the EDS core team through the support page for further assistance.