Icons and iconography

Icons are visual indicators that help users identify important content and to navigate it.

Using icons

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.

Eight example icons from the Design System
A selection of icons used in the Design System

You can find these icons in SVG format in the Github repository. You can also get them in a ‘stacked’ SVG sprite.

Size

The default size of icons is 24px. You can set alternative sizes, in 4px increases, with additional CSS classes.

Sample HTML

<svg class="ds_icon  ds_icon--12" aria-hidden="true" role="img">
    <use xlink:href="/assets/images/icons/icons.stack.svg#search"></use>
</svg>
<svg class="ds_icon  ds_icon--16" aria-hidden="true" role="img">
    <use xlink:href="/assets/images/icons/icons.stack.svg#search"></use>
</svg>
<svg class="ds_icon  ds_icon--20" aria-hidden="true" role="img">
    <use xlink:href="/assets/images/icons/icons.stack.svg#search"></use>
</svg>
<svg class="ds_icon  ds_icon--24" aria-hidden="true" role="img">
    <use xlink:href="/assets/images/icons/icons.stack.svg#search"></use>
</svg>
<svg class="ds_icon  ds_icon--28" aria-hidden="true" role="img">
    <use xlink:href="/assets/images/icons/icons.stack.svg#search"></use>
</svg>
<svg class="ds_icon  ds_icon--32" aria-hidden="true" role="img">
    <use xlink:href="/assets/images/icons/icons.stack.svg#search"></use>
</svg>
<svg class="ds_icon  ds_icon--36" aria-hidden="true" role="img">
    <use xlink:href="/assets/images/icons/icons.stack.svg#search"></use>
</svg>
<svg class="ds_icon  ds_icon--40" aria-hidden="true" role="img">
    <use xlink:href="/assets/images/icons/icons.stack.svg#search"></use>
</svg>
<svg class="ds_icon  ds_icon--44" aria-hidden="true" role="img">
    <use xlink:href="/assets/images/icons/icons.stack.svg#search"></use>
</svg>
<svg class="ds_icon  ds_icon--48" aria-hidden="true" role="img">
    <use xlink:href="/assets/images/icons/icons.stack.svg#search"></use>
</svg>
<svg class="ds_icon  ds_icon--52" aria-hidden="true" role="img">
    <use xlink:href="/assets/images/icons/icons.stack.svg#search"></use>
</svg>
<svg class="ds_icon  ds_icon--56" aria-hidden="true" role="img">
    <use xlink:href="/assets/images/icons/icons.stack.svg#search"></use>
</svg>
<svg class="ds_icon  ds_icon--60" aria-hidden="true" role="img">
    <use xlink:href="/assets/images/icons/icons.stack.svg#search"></use>
</svg>

Colour

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 SVG element.

Sample HTML

<style>
.ds_colour__pink {
    color: #e5007e;
}
</style>

<p>Default colour <svg class="ds_icon" aria-hidden="true" role="img"><use xlink:href="/assets/images/icons/icons.stack.svg#search"></use></svg></p>

<p class="ds_colour__pink">Icon inheriting the colour of its parent <svg class="ds_icon" aria-hidden="true" role="img"><use xlink:href="/assets/images/icons/icons.stack.svg#search"></use></svg></p>

<p>Icon with its own colour specified <svg class="ds_icon  ds_colour__pink" aria-hidden="true" role="img"><use xlink:href="/assets/images/icons/icons.stack.svg#search"></use></svg></p>

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.

The icon-mask CSS 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.

For developers

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:

@include icon-mask('/my/cool/icon.svg');

Accessibility

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.

Sample HTML

<p><button class="ds_button">
    <span class="visually-hidden">Search</span>
    <svg class="ds_icon" aria-hidden="true" role="img"><use xlink:href="/assets/images/icons/icons.stack.svg#search"></use></svg>
</button></p>

Social media

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: designsystem@gov.scot

Back to top