Website design guidelines

Icons and buttons

Icon cheat sheet

Icons are embedded using Font Awesome

Beneath each icon example below you will find an identifier code. The first 3 letters indicate the icon set:

  • fas = Solid
  • far = Regular
  • fab = Brand

Along side the icon set, you will find the icon shape identifier, for example 'fa-user'. Both of these variables must be specified when choosing an icon.

Homepage services icons

Pound sign iconBuy parking permitsfas fa-pound-sign

House iconPay council taxfas fa-home

Exclamation mark iconReport a problemfas fa-exclamation-triangle

Child waving hands iconCheck school term datesfas fa-child

New service icons may be sourced from font awesome.

Navigation

My Accountfas fa-user

Searchfas fa-search

Buttons and interaction

Navigate back / Paginationfas fa-chevron-left

Navigate forward / Paginationfas fa-chevron-right

Opened expandablefas fa-chevron-up

Closed expandablefas fa-chevron-down

Slide left / Paginationfas fa-angle-double-left

Slide right / Paginationfas fa-angle-double-right

Alerts

Passed validationfas fa-check-circle

Failed validationfas fa-times-circle

Alertfas fa-times-circle

Action links

Inform the user they are performing a browser based action. Use these links anywhere in the flow of content.

To find out more visit this external linkfas fa-external-link-alt

Read our cookie policyfar fa-window-restore

Share this pagefas fa-share

Bookmark this page so you can come back to it laterfar fa-bookmark

Print this page so you can refer to this laterfas fa-print

You can download this MS Word Document (127KB)far fa-file-word

You can download this as a PDF (200KB)far fa-file-pdf

You can download this image (40KB)far fa-file-image

Copy this reference to your clip boardfar fa-copy

Bottom of page links

Always appear as the last item in page content. Only use when relevant, for example 'print this page' is used if there is information worth referencing later. 'Share this page' should be used only when the content could be useful to others.

Print this pagefas fa-print

Save your progresfar fa-save

Share this pagefas fa-share

Load a saved applicationfas fa-save

Check list icons

Used in checklists within page content.

I am includedfas fa-check

I am not includedfas fa-times

Data table icons

Used to perform actions on output data, for example 'Added person' tables. Colour can vary depending on background.

Deletefar fa-trash-alt

Editfar fa-edit

Addfas fa-plus

Removefas fa-minus

Footer icons

Used in the contact area of the footer.

Send us a messagefar fa-envelope

Visit us in personfas fa-map-marker-alt

Social icons

New social media icons may be sourced from font awesome.