Information

You appear to be using an unsupported browser, and it may not be able to display this site properly. You may wish to upgrade your browser.

Icons

Icons are small images that help users identify important content and interact with components and patterns

Icons in the Design System

The Scottish Government Design System components and patterns use Google Material icons.  

For example, site search uses a magnifying glass icon. 

The icons are incorporated into the Design System npm package and Github repository. They’re included as individual SVG images and as a ‘stacked’ SVG sprite. 

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

Using icons not included in the Design System  

You should only use other icons if you have an evidenced user need. 

If you have an evidenced user need for an icon that’s not in the Design System, you can: 

Icons must have a clear meaning and function to users. You should: 

An icon should not represent more than one thing in your service.

Icon size  

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

Links that contain icons and images must meet the Web Content Accessibility Guidelines (WCAG) 2.2 target size success criterion.  

Sample HTML

<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>

Icon colour 

Icons use the colour of the text around them by default. You can give icons a different colour by setting the CSS colour on their SVG element. 

All icons must meet the WCAG 2.2 colour contrast success criterion

Accessibility

Use aria-hidden="true" for decorative icons so screen readers will ignore them. 

When it’s important that a screen reader tells the user about an icon, place a hidden element before it with a text label. 

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 icons

The Design System does not include social media icons. You should download brand assets directly from the social media platform.  

Back to top