Skip to content
search icon
clear
Component Status

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

  • All icons should be unique. Before creating a new icon, always verify that there is not an existing icon in the library under a different name. Search for keywords associated with the icon you are missing to ensure it is not already 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 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.
  • ⚠️ More information to come about submitting process. In the mean-time reach out to one of the EDS core members on Slack.
Edit this page on GitHub