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.

seb logo

Icons

How to use icons in our applications.

Guidelines

Short description

We use Font Awesome 5, regular, for generic system icons up to 32 px. Since 2021, we generally do not use SEB:s pictograms.

How to use icons

Instructions

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

  • Use the icon library in Figma for sketching. Or 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 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?

There are many Font Awsome icons and you can choose the icon that works best for your context.

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

 

Subsections

Page last updated

Feedback

Was this helpful?