Icons
Implementation
<span
data-[icontype]="[icontype]-[iconname]"
data-[icontype]-class="optional-classname"
data-[icontype]-title="optional-title"
></span>
icontype is either mybicon for UI icons or
serviceicon for service icons.
Only name is required, the others are optional. title is for when you need a hover
text on the icon. Set size and colours via icon--* classes or CSS using the color or
the fill
attribute.
If clicking on the icon makes an element not clickable, add class pointev-none on the icon.
React syntax examples can be found in the React package readme.
<span data-mybicon="mybicon-box"></span>
<span data-mybicon="mybicon-box" data-mybicon-class="icon--m"></span>
<span data-serviceicon="serviceicon-crate" data-serviceicon-class="icon--l icon--green-dark"></span>
<span data-serviceicon="serviceicon-crate" data-serviceicon-class="icon--xl icon--gray"></span>
<span data-mybicon="mybicon-star" data-mybicon-class="icon--green"></span>
<span data-mybicon="mybicon-star" data-mybicon-class="icon--green-dark"></span>
<span data-mybicon="mybicon-star" data-mybicon-class="icon--orange"></span>
<span data-mybicon="mybicon-star" data-mybicon-class="icon--red"></span>
<span data-mybicon="mybicon-star" data-mybicon-class="icon--gray"></span>
<span data-mybicon="mybicon-star" data-mybicon-class="icon--lightgray"></span>Applications and interfaces (mybicon)
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. | |
| A compound icon for table sorting, correct display is handled by ARIA and CSS. |
| 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 (serviceicon)
Tip! By clicking on the service icons, you will also see which services they are used in.
Deprecations
Any implementation using xlink:href should be changed.
width and height attributes are deprecated to reduce complexity. The icons come
with a default size and should use CSS to control it beyond that.