Icons
We use Font Awesome 5 for generic system icons up to 32 px.
Guidelines
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:
Placement
See Icons and actions for guidelines of placing and icon next to a label or action.
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
- 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)