Icons

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. 

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: 

• use other filled icons from the Google Fonts icons library 
• design icons using the Google Material key lines 

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

• limit the number of icons 
• follow the icon usability guidance from the Nielson Norman Group 

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.  

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

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