Icons

Icons can be used on landing pages to create quick, visual links to tasks where there are several tasks on offer.

​Adding icons to a page

Icons can be added 3-across, 4-across, or 6-across, depending on how many there are to display. Always use the corresponding row type so that they spread across the full width of the page (for example, the 6 icons shown above have been added to a 6-across row).

Icons should be added in using the 'SVG icon web part'. This allows you to select from a bank of icons and choose from a circular background or no background.

For corporate sites, use the standard background. Background colour setting is white and the background hover colour setting is #dbe1e3.

Always allow a top margin of 30px, top padding of 15px and bottom padding of 15px around an icon row. If you are using a background colour, you will need to extend the top padding to 45px. Ensure you change the background colour of the icons if the row has a background colour, so that they appear transparent.

If you need to create a new icon

New icons can be selected from the standard set or can be customised from this set. They then need to be uploaded to the icons folder in the central admin area.