Icons and iconography
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.
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 href="/assets/images/icons/icons.stack.svg#search"></use>
</svg>
<svg class="ds_icon ds_icon--16" aria-hidden="true" role="img">
<use href="/assets/images/icons/icons.stack.svg#search"></use>
</svg>
<svg class="ds_icon ds_icon--20" aria-hidden="true" role="img">
<use href="/assets/images/icons/icons.stack.svg#search"></use>
</svg>
<svg class="ds_icon ds_icon--24" aria-hidden="true" role="img">
<use href="/assets/images/icons/icons.stack.svg#search"></use>
</svg>
<svg class="ds_icon ds_icon--28" aria-hidden="true" role="img">
<use href="/assets/images/icons/icons.stack.svg#search"></use>
</svg>
<svg class="ds_icon ds_icon--32" aria-hidden="true" role="img">
<use href="/assets/images/icons/icons.stack.svg#search"></use>
</svg>
<svg class="ds_icon ds_icon--36" aria-hidden="true" role="img">
<use href="/assets/images/icons/icons.stack.svg#search"></use>
</svg>
<svg class="ds_icon ds_icon--40" aria-hidden="true" role="img">
<use href="/assets/images/icons/icons.stack.svg#search"></use>
</svg>
<svg class="ds_icon ds_icon--44" aria-hidden="true" role="img">
<use href="/assets/images/icons/icons.stack.svg#search"></use>
</svg>
<svg class="ds_icon ds_icon--48" aria-hidden="true" role="img">
<use href="/assets/images/icons/icons.stack.svg#search"></use>
</svg>
<svg class="ds_icon ds_icon--52" aria-hidden="true" role="img">
<use href="/assets/images/icons/icons.stack.svg#search"></use>
</svg>
<svg class="ds_icon ds_icon--56" aria-hidden="true" role="img">
<use href="/assets/images/icons/icons.stack.svg#search"></use>
</svg>
<svg class="ds_icon ds_icon--60" aria-hidden="true" role="img">
<use 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 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 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 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
<button class="ds_button"> <span class="visually-hidden">Search</span>
<svg class="ds_icon" aria-hidden="true" role="img">
<use href="/assets/images/icons/icons.stack.svg#search"></use>
</svg></button>Social media
You should get the most recent logo icons from social media brand assets.
Feedback, help and support
If you need help or support you can e-mail us at designsystem@gov.scot
There is a problem
Thanks for your feedback