Icons

General icons

Subject categories

Sharing

Using icons

The way we use icons has changed a few times, but while older approaches (eg. our icon font) are still found in a few places, inline SVG is currently our preferred approach.

Icons can be included by calling the `svg_icon` helper method with the name of the icon:

= svg_icon :reply

Guidelines for designers

  • Use the Adobe Illustrator master file to create production-ready icons which can be found on Google Drive in: Design and UX / Design Tool Kit / Brand Assets / Icons
  • Artboard is 32px square
  • Use a 2px stroke width
  • Snap to pixel where possible (found under the View menu)
  • Use Pixel Preview (found under the View menu) to check at actual size
  • Only use FL black – colour will be added via CSS
  • Ensure all objects are ungrouped
  • Remove all unnecessary points and unite shapes where possible
  • Before saving as final SVG, convert strokes to outlines

To save the icon as an svg, select "Presentation attributes" in Advanced Options:

Guidelines for developers

Use the following checklist when adding an icon to make sure we retain consistency:

  • Remove generated IDs
  • Remove inline styles
  • Remove fills for single colour icons
  • Remove groups unless you need to target a group of paths in CSS
  • Ensure the width and height is set to 32px

Most of the above can be automated using SVGO — an SVG optimizer tool. You can download this config file and run the following command in the terminal:

svgo --config=futurelearn_svgo.yml icon-name.svg -o - --pretty