Icon Colour Classes
A group of class names to change the default colour of an SVG.
Usage
Add [namespace]-icon[colour modifier] to the base [namespace]-icon class, e.g. class="[namespace]-icon [namespace]-icon--blue-alt"
For a full list of the brand colours, see the Fill colour utility page.
Accessible attributes
| Accessible attribute | Description |
|---|---|
aria-hidden="true" |
When an icon is used for only decorative purposes add this attribute to the icon's tag. |
Modifier selectors
| Modifier selector | Description |
|---|---|
slb-icon--primary |
Primary icon fill colour to Blue. |
slb-icon--alt |
Alternative icon fill colour to Blue alt. |
slb-icon--dark |
Dark icon fill colour to Blue dark. |
slb-icon--pale |
Pale icon fill colour to Blue pale. |
slb-icon--yellow |
Yellow icon fill colour to Yellow. |
slb-icon--white |
White icon fill colour to White. |
.slb-icon--primary - Primary icon fill colour.
.slb-icon--alt - Alternative icon fill colour.
.slb-icon--dark - Dark icon fill colour.
.slb-icon--pale - Pale icon fill colour.
.slb-icon--yellow - Yellow icon fill colour.
.slb-icon--white - White icon fill colour.