Internet Explorer is not supported by Design Library

The last version of Internet Explorer, version 11, was released on October 17, 2013. This is a very long time ago when taking into account the rapid development of web technologies. These days it is often difficult and time consuming to get modern technologies to work well in this old browser. More and more frameworks are dropping support, and even Microsoft themselves has announced that they will fully drop support for IE in their own services in 2021.

Consequently, we have decided to not include support for IE in the Design Library website.

Luckily, there are modern options in active development. Please use Firefox, Edge or Chrome instead.

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:

Selection of icons 

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

  • 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)
Specification

Icon sizes

Subsections

Page last updated

Feedback

Was this page helpful?