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 and actions

Should icons be to the left or right of an action, link or lable? It depends! Have a look here.

We noticed that icons were being placed on both sides of labels, links or button links and decided to create a general pattern for it.

Icon placement

1. Icon on the left

Place the icon on the left side of the link to make it stand out, become easier to understand, or used simply as a decorative element.

2. Action on the left

Place the icon on the right side when it's used as an action, like a button, chevron or a link indicator (i.e an arrow). Think of the text as a label that explains the action.

3. Icon and action combination

Sometimes we want to combine these, with an icon to the left and and action to the right. Like this.

Exceptions

There are of course exceptions, for example:

  • The Previous & Next-buttons. The Previous button will have the arrow to the left and the next button will have it on the right.
  • The info icon, when placed together with a label is always placed on the right side for example. There are for sure more examples of exception!

Related

Subsections

Page last updated

Feedback

Was this page helpful?