Icons

We use Font Awesome 5 for generic system icons up to 32 px.

Where are the icons?

The full list of icons available in FontAwesome:

https://fontawesome.com/icons?d=gallery&s=regular

Feel free to browse and choose the icons that work for you. To make the icon work in smaller sizes, use the "regular" version and avoid icons that are framed in circle or square.

Use icons

Everything you need to implement icons you can find on our page in Github. But in short:

  • If you only need it for your sketches, click on the icon of your choice in FontAwesome and screenshot it.
  • If you need a version to implement (npm, cdn, Sketch, etc), go to our License page in Github, sign up on the list and download the icon-files (svg).

Who needs license?

Apps and web pages don’t need licenses; it’s only the people in the project who are actively working with the icons, either in prototypes or implementing them in code who need to occupy a seat (not all members in a team need a seat either).

Which one?

This is up to you! There are many, many Font Awsome icons, and here we have selected a few that we like:

Selection of icons 

Do's and don'ts

Do

  • Use icons when they add value
  • Use Font Awesome 5 for generic system icons up to 32 px (fa-2x)
  • Only use one size for icons when they are together
  • Use the "regular" version
  • Icons are generally black, or blue to signal interactivity 

Don't

  • Avoid the icons that are framed in circle/square
  • Don't stack icons on top of each other
  • Don’t combine icons to build meaning (i.e a lock inside a computer to describe secure application)
  • Don’t only rely on icon to convey meaning (i.e button with icons only)

Icon sizes