Make sure that a similar icon is not already in use.
Think about the icon you want to create and which category it fits in.
Use the icon grid to ensure consistency with existing icons.
Make sure icon works across different sizes.
Remember to create both solid and outline versions of your icon (Use solid over outline, unless icon is interactive).
Use a consistent stroke thickness based on sizes (Use at least 2px for stroke to avoid odd resizing issues or using fills with strokes).
Design clean and simple forms using our shapes.
Use flat shapes over 3d forms.
Rounded corners should make an icon feel friendly, not childish.
An icon should be one topic, therefore don't overlay or intersect an icon with another icon.
Don't add text to an icon as this will break accessibility.
Icons are only one colour, but they can be any of our colours. Make sure that the icons work with different colours.
We use a grid for icon creation to give consistency across our icons. You should also be considering where your paths sit, to be as close to pixel perfect as possible. Here are examples of the grid and basic shapes to show it's usage:
Grid - Vertical
Grid - Horizontal
Grid - Circle
Icons are created using illustrator with a 32px x 32px art-board. This allows scaling both up and down of the icon’s size. It is important to check your icons across different sizes during creation. The Nucleus Design System scales across different screen sizes meaning elements, including the icon’s scale to retain their visual proportions. We recommend checking your icon works between 16px and 72px.
Once you’re icons are completed (and signed off!) they need to be made ready for development. Follow these steps to a happy developer:
Make sure your icon is set to black.
Select the icon and choose Object > Expand appearance.
Then using the top menu select File > Export > Export for Screens and export the icon to .svg file type.
When designing the icons, use only paths not shapes.
Make sure all unnecessary attributes in the SVG document have been removed including;
data-name=”” attributes if they exist.
All colour information e.g.
<style> and any
Nested and empty
The position of each icon within the artboard must be consistent. This is very important when creating different states of the same icon.
Make sure the paths align to the pixel grid.
When creating a corner, ensure it has only 2 points. Too many points per shape will overcomplicate the icon and increase file size.