Icons
Applications and interfaces
Tip! By clicking on each icon, the full icon name will be copied.
Usage
To clarify usage of icons that are related, look similar or might get mixed up.
| Icon | Meaning and usage |
|---|---|
|
Closed state for disclosure and collapsible. Closed state for drawers from left and open state for drawers from right. |
|
|
Expanded/open state for disclosure and collapsible. Indication for dropdown. |
|
| Navigate to the top. | |
|
Open state for drawers from left and closed state for drawers from
right. Navigate back. |
|
| Add, not open or expand. | |
| Remove or hide, not close or collapse. | |
| Column can be sorted but has no current sorting state. | |
| Current sort order ascending: a–å, 0–9, 1.1–31.12., oldest to newest. | |
| Current sort order descending: å–a, 9–0, 31.12.–1.1., newest to oldest. |
| Icon | Usage and meaning |
|---|---|
| Help messages and related buttons. | |
| Information messages. | |
| Important messages that need attention. | |
| Dangerous goods | |
| Feedback, comment, message. | |
| Customer service. | |
| New message, new support case. |
| Icon | Usage and meaning |
|---|---|
| Useradmin application, settings | |
| Regular user | |
| Superuser |
Bring services
Tip! By clicking on the service icons, you will also see which services they are used in.
Implementation
Implementation differs between vanilla JS and React, but the properties are the same. Examples for the React method can be found in the npm package readme. For vanilla JS, insert icons with markup like the examples below.
<!--
Simple example -->
<span data-mybicon="mybicon-cross" data-mybicon-class="icon-ui"></span>
<!-- Example with all available options -->
<span
data-mybicon="mybicon-arrow-down"
data-mybicon-class="optional-classname"
data-mybicon-width="28"
data-mybicon-height="28"
data-mybicon-title="optional-title"
></span><!--
Simple example -->
<span
data-serviceicon="serviceicon-crate"
data-serviceicon-class="mybring-service-icon--grey"
></span>
<!-- Example with all available options -->
<span
data-serviceicon="serviceicon-building"
data-serviceicon-class="optional-classname"
data-serviceicon-width="48"
data-serviceicon-height="48"
data-serviceicon-title="optional-title"
></span>Tailor it to your application
Only the name is required, the other properties are optional. Size and colours
are provided by using the class property. Colour is set by using the fill
attribute. If the icon is inside a link and you want to change colour on hover, the fill
attribute has to be set in the link level class.
width and height are needed if such properties
aren't set in the classes. title is for when you need a hover
text on the icon.
If clicking on the icon makes the element not clickable, add class pointev-none on the icon.
<!--
Interface icons can be scaled -->
<span data-mybicon="mybicon-cross" data-mybicon-class="icon-ui"></span>
<span data-mybicon="mybicon-cross" data-mybicon-class="icon-ui--m"></span>
<span data-mybicon="mybicon-cross" data-mybicon-class="icon-ui--l"></span>
<!-- Interface icons can have different colors -->
<span data-mybicon="mybicon-arrow-right" data-mybicon-class="icon-ui--m"></span>
<span
data-mybicon="mybicon-arrow-right"
data-mybicon-class="icon-ui--m icon-ui--green"
></span>
<span
data-mybicon="mybicon-arrow-right"
data-mybicon-class="icon-ui--m icon-ui--green-dark"
></span>
<span
data-mybicon="mybicon-arrow-right"
data-mybicon-class="icon-ui--m icon-ui--orange"
></span>
<span
data-mybicon="mybicon-arrow-right"
data-mybicon-class="icon-ui--m icon-ui--red"
></span>
<span
data-mybicon="mybicon-arrow-right"
data-mybicon-class="icon-ui--m icon-ui--gray"
></span>
<span
data-mybicon="mybicon-arrow-right"
data-mybicon-class="icon-ui--m icon-ui--lightgray"
></span>.mybring-service-icon--grey {
fill: #aaa;
}Deprecated implementation method and icons
Any implementations using xlink:href should be changed.