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

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>

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.

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