Icons

When to use

Use an icon where it would help a user understand the content or function of a UI element. For example, left and right chevrons on Previous and Next buttons.

When not to use

Do not use icons alone to convey meaning. You must add a title or label as well. The only exception to this is if the icon is well-known. For example, a social media logo.

Example icons

Use the code snippets below to generate the examples shown here.

Further icons are available from IcoMoon. If you use any of these you must use the format:

<i class="icon-name" aria-hidden="true"></i>

bcc-font_link bcc-font_external-link bcc-font_menu bcc-font_search bcc-font_buspass bcc-font_counciltax bcc-font_feedback bcc-font_foi bcc-font_parking bcc-font_registerbirth bcc-font_cross bcc-font_verified bcc-font_download font_user-add bcc-font_bin bcc-font_alert bcc-font_alert-outlined bcc-font_user bcc-font_account bcc-font_pdf bcc-font_up bcc-font_left bcc-font_down bcc-font_right bcc-font_cancel bcc-font_tick bcc-font_blockquote bcc-font_calendar bcc-font_phone bcc-font_info bcc-font_info-outlined bcc-font_help bcc-font_location bcc-font_new-window bcc-font_printer bcc-font_clock bcc-font_settings bcc-font_eye bcc-font_eye-blocked bcc-font_notification bcc-font_linkedin bcc-font_nextdoor bcc-font_youtube1 bcc-font_facebook bcc-font_instagram bcc-font_x bcc-font_pinterest

<i class="bcc-font_link" aria-hidden="true"></i>
<i class="bcc-font_external-link" aria-hidden="true"></i>
<i class="bcc-font_menu" aria-hidden="true"></i>
<i class="bcc-font_search" aria-hidden="true"></i>
<i class="bcc-font_buspass" aria-hidden="true"></i>
<i class="bcc-font_counciltax" aria-hidden="true"></i>
<i class="bcc-font_feedback" aria-hidden="true"></i>
<i class="bcc-font_foi" aria-hidden="true"></i>
<i class="bcc-font_parking" aria-hidden="true"></i>
<i class="bcc-font_registerbirth" aria-hidden="true"></i>
<i class="bcc-font_cross" aria-hidden="true"></i>
<i class="bcc-font_verified" aria-hidden="true"></i>
<i class="bcc-font_download" aria-hidden="true"></i>
<i class="bcc-font_user-add" aria-hidden="true"></i>
<i class="bcc-font_bin" aria-hidden="true"></i>
<i class="bcc-font_alert" aria-hidden="true"></i>
<i class="bcc-font_alert-outlined" aria-hidden="true"></i>
<i class="bcc-font_user" aria-hidden="true"></i>
<i class="bcc-font_account" aria-hidden="true"></i>
<i class="bcc-font_pdf" aria-hidden="true"></i>
<i class="bcc-font_up" aria-hidden="true"></i>
<i class="bcc-font_left" aria-hidden="true"></i>
<i class="bcc-font_down" aria-hidden="true"></i>
<i class="bcc-font_right" aria-hidden="true"></i>
<i class="bcc-font_cancel" aria-hidden="true"></i>
<i class="bcc-font_tick" aria-hidden="true"></i>
<i class="bcc-font_blockquote" aria-hidden="true"></i>
<i class="bcc-font_calendar" aria-hidden="true"></i>
<i class="bcc-font_phone" aria-hidden="true"></i>
<i class="bcc-font_info" aria-hidden="true"></i>
<i class="bcc-font_info-outlined" aria-hidden="true"></i>
<i class="bcc-font_help" aria-hidden="true"></i>
<i class="bcc-font_location" aria-hidden="true"></i>
<i class="bcc-font_new-window" aria-hidden="true"></i>
<i class="bcc-font_printer" aria-hidden="true"></i>
<i class="bcc-font_clock" aria-hidden="true"></i>
<i class="bcc-font_settings" aria-hidden="true"></i>
<i class="bcc-font_eye" aria-hidden="true"></i>
<i class="bcc-font_eye-blocked" aria-hidden="true"></i>
<i class="bcc-font_notification" aria-hidden="true"></i>
<i class="bcc-font_linkedin" aria-hidden="true"></i>
<i class="bcc-font_nextdoor" aria-hidden="true"></i>
<i class="bcc-font_youtube1" aria-hidden="true"></i>
<i class="bcc-font_facebook" aria-hidden="true"></i>
<i class="bcc-font_instagram" aria-hidden="true"></i>
<i class="bcc-font_x" aria-hidden="true"></i>
<i class="bcc-font_pinterest" aria-hidden="true"></i>