Icons are visual indicators that help users identify important content and to navigate it.
The Digital Scotland Design System uses some Google Material icons. These are free to use and can be used by other public sector organisations. The Design System uses the ‘filled’ style of icons where the shapes are filled with solid colour instead of an outline.
When choosing icons, pick symbols that with a common meaning. For example, a cross for a ‘close’ action. Limit the use of icons and be consistent with them to enforce meaning in your service.
You can find these icons in SVG format in the Github repository. You can also get them in a ‘stacked’ SVG sprite.
The default size of icons is 24px. You can set alternative sizes, in 4px increases, with additional CSS classes.
How to colour icons depends on whether they’re:
- images in your markup
- background images in your CSS
When choosing an icon colour, all icons must meet colour contrast standards to meet the Public Sector Bodies (Websites and Mobile Applications) Accessibility Regulations 2018.
Colouring icons in markup
Icons use the colour of the text around them by default. You can give icons a specific colour by styling their
Colouring icons in CSS
We use the ‘icon mask’ CSS property to give icons custom colours in CSS. These icons also use the colour of the text around them. You can give icons a specific colour by styling their element.
icon-maskCSS property is not supported in Internet Explorer (11 and below) and some other older browsers. Our icons will always be coloured black in those browsers.
The Design System includes a SASS mixin that adds all of the necessary CSS properties. It takes the image path as a parameter, for example:
It’s important to consider whether an icon is decorative or not. Screen readers should ignore decorative icons. You need to give hidden text to icons that are not decorative. Screen readers will announce this.
Icons used in Design System components and patterns are considered decorative as a general rule. They have
aria-hidden="true" so screen readers will ignore them. If it’s important that a screen reader tells the user about an icon, place a hidden element before it with a text label, as we do in this example.
You should get the most recent logo icons from social media brand assets.
Feedback, help or support
If you need any help or want to give any feedback you can e-mail us at: firstname.lastname@example.org