Icon design

Process for creating icons

We have a mix of different types of icons in use in ONS and we've created three different sizes of icon to adapt them to different use cases.

See the iconography page for detailed information on the different sizes.

1. Check the library

First check the All icons in progress or By topic view of the Icon library (opens in a new tab)  to see if the icon is already listed as a card. You can use the search function to try different words for it in case it's called something different.

• If it's listed and not started, tag yourself and create the icon
• If it's not listed at all, create a card, tag yourself and create the icon
• If it's listed and in progress, speak to the person tagged on the card

2. Set up Adobe Illustrator

Make a copy of Icon template.ai, which is on our server under Assets > Icons. This file should be set up with correctly sized artboards aligned to the grid.

• Ensure you are working in RGB and using pixels as the unit of measurement.
• Amend grid settings under Preferences > Guides & Grid
  Gridline every: 24 px
  Subdivisions: 24
• You can use Snap to pixel or Snap to grid (toggle using `SHIFT` `CMD` `'`) under the View menu. This helps ensure points are on the pixel as whole numbers and not e.g. 1.4273px, which reduces blurring.
• You can toggle the grid view on and off using `CTRL` `'`. This can help you to judge whether the icon looks right.

3. Design the icon

• Follow the style, shapes and level of detail already used in other icons. If there are similar elements, copy and paste them to ensure consistency. We use simple geometric shapes with rounded corners to give a friendlier feel.
• Work within the guide shapes, these are to ensure all icons feel a similar size. Align the icon to the shape that best fits (square, circle, vertical rectangle or horizontal rectangle), this will also ensure you stay within the margins. These shapes are on a separate layer so you can toggle them on and off.

• If the shape is long and thin, consider placing it diagonally so it feels balanced.
• If you have to toggle Snap to pixel off and on, make sure you check the sizes and positions are to whole pixels (or half/quarter pixels if needed) in the Transform menu.
• Design the icon in Night Blue for the small and medium icons. You may need to add outlines to shapes if they sit on top of others (these should be cut out when finalised). Use 70% and 40% tints of Night Blue in the large icon. You shouldn't need outlines if there is enough contrast.

Details

Follow the details of corners, strokes etc. in most cases. You might find you need to deviate from these in order to ensure an icon is balanced. Use the icons that already exist as a guide.

It is easier to start at the smallest icon size and work up to the largest. If you do start at the largest, work in multiples of four in terms of measurements to make it easier when scaling down, for example 44px wide, 48px tall etc.

Small (16px)
Radius outside: 0.5 px
Radius inside: 0 px
Radius outside (rounded shape): 0.75 px
Stroke weight: 1 px
Stroke cap and corner: Rounded
Negative space: 0.75 px

Medium (32px)
Radius outside: 1 px
Radius inside: 0 px
Radius outside (rounded shape): 1.5 px
Stroke weight: 1.5 px
Stroke cap and corner: Rounded
Negative space: 1 px

Large (64px)
Radius outside: 2 px
Radius inside: 0 px
Radius outside (rounded shape): 3 px
Stroke weight: 3 px
Stroke cap and corner: Rounded
Negative space: 2 px (if needed)

4. Review the icon

Save your file on the server under Assets > Iconography > To approve.

Use the weekly design review or other methods to go through any icons that have been created so we can check they fit with the set and ensure there is no duplication of effort.

Implement any changes needed to the icon, and if necessary, get someone to double-check it.

5. Finalise and export

Check all the shapes align to pixels (or half/quarter pixels where needed) and expand all strokes, so they become solid shapes.

Use Pathfinder to merge and subtract the shapes as necessary, so the icon is in its simplest form, and not just grouped shapes. The large icons should be merged per each colour, and the different colours can then be grouped.

Export for RGB

• Set Grid layer to invisible and export the artboards for RGB (tick Use Artboards)
• SVG – instructions for exporting SVGs (opens in a new tab) . It will add the file name at the start of the exported files, you can change this to a symbol like `+` then remove in bulk afterwards.
• PNG – Go to Export as > Choose PNG > Tick artboards > Resolution High (300 ppi). You don't have to save these permanently on the server, we only need SVGs for RGB so you can delete once they are uploaded to Notion.

Save the SVG exports on the server in Design assets > Icons > RGB icons

Export for CMYK

• Export the artboards as separate .ai files: Save As > choose .ai > Save > [Next window] Tick Save Each Artboard as a Separate File > Select All or Range.
• Delete all the unnecessary layers and grid shapes.
• Change the document colour mode to CMYK and convert the colours to the CMYK values shown in Colours.
  

Save the exported .ai files on the server in Design assets > Icons > CMYK icons. We are not uploading the CMYK .ai files to Notion, but do save them on the server for designers to use.

Upload to Notion

Upload the RGB icons (SVGs and PNGs) to Notion in the relevant card, following the format of the other icon cards.

Set the status to Good to go.

Checklist

• Icon reviewed by other designers and any changes implemented
• Expanded strokes and joined shapes using Pathfinder
• Named artboards according to icon name followed by size (Large-circle, Large, Medium, Small)
• Exported for digital: saved as SVG in RGB colours on design server
• Exported for print: converted to Night Blue CMYK values, unnecessary layers deleted and artboards exported as separate .ai files to design server
• Added RGB icons as SVG and PNG to Notion library and set status to Good to go

Web UI icons

For simple UI icons used on websites that we don't have in our custom library, you can use the icons from Google's Material Design (opens in a new tab) . This helps us move quickly and maintain visual consistency for the simpler interface icons. Check the library and/or speak to a designer first.

• Always use the "rounded" theme
• Use SVGs instead of raster images

Help improve this page

Let us know how we could improve this page, or share your user research findings. Discuss this page on GitHub (opens in a new tab)