Icons

General icons

accreditation

accreditation

activity

activity

conversation

conversation

course

course

courses

courses

certificates

certificates

coin

coin

book

book

calendar

calendar

awards

awards

alert

alert

announcements

announcements

home

home

hourglass

hourglass

educator

educator

globe

globe

deakin_sync

deakin sync

degree

degree

courses_with_face

courses with face

create

create

id_card

id card

infinity

infinity

program_with_face

program with face

progress

progress

hours_pw

hours pw

profile_ticked

profile ticked

profile

profile

portfolio

portfolio

profile_question_mark

profile question mark

notifications

notifications

photo

photo

lock_close

lock close

upgrade

upgrade

link

link

tick

tick

todo

todo

sponsored

sponsored

steps

steps

resources

resources

social

social

question

question

recommended

recommended

direction_arrow

direction arrow

provisional

provisional

device_laptop

device laptop

device_mobile

device mobile

cross

cross

device_desktop

device desktop

cmt_open

cmt open

configure

configure

chevron_down

chevron down

cmt_close

cmt close

preview

preview

arrow

arrow

bookmark

bookmark

like

like

pin

pin

generate

generate

learning_manager

learning manager

enrol

enrol

flag

flag

download

download

edit

edit

sentiment_negative

sentiment negative

device_tablet

device tablet

reply

reply

search

search

pull

pull

remove_learner

remove learner

preview_solid

preview solid

like_solid

like solid

pin_solid

pin solid

bookmark_solid

bookmark solid

edit_solid

edit solid

star

star

triangle

triangle

sentiment_positive

sentiment positive

star_solid

star solid

explorers

explorers

sentiment_neutral

sentiment neutral

preparers

preparers

advancers

advancers

hobbyists

hobbyists

flourishers

flourishers

quotes left

fixers

fixers

stats_stats

stats

quotes right

partners

website

career advice

Artboard 90

launch

awards_1

awards solid

id-fail

id fail

information

information

study_groups

groups

id-varification

id varification

premium course

extra benefits

vitalisers

vitalisers

levels

Subject categories

Sharing

Brand

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

Icons for use in React live in app/views/shared/svg_icons/ as .html files.

When adding a new icon you'll need to:

  • Check for icon consistency (see instructions below)
  • Include it in the SvgIcons index file:/app/javascript/components/DesignSystem/CoreStyles/SvgIcons/index.js
  • Include it in your component. When a component relies on multiple icons, for performance reasons it's best to only import the individual icons you need import { Star, StarSolid } instead of importing them all import * as SvgIcons

‌All our icons are outline items by default. We use solid icons to indicate status change such as like and like_solid icons for example. Colour depends whether the icon is interactive and should be changed using CSS.

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 are set to 32px width="32" height="32"
  • Ensure the viewBox is set to viewBox="0 0 32 32"
  • Ensure the icon has a a-svg-icon class and a modifier set to the name of the icon such as a-svg-icon--chevron-down

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

The way we use icons has changed a few times.

  • we initially used render partial: to render inline SVGs (.html)
  • then we used svg_icon which avoids duplication via <symbol> elements (.svg)
  • now we use Webpack to transpile SVGs into React components so that we can render them in React (.html again)