Skip main navigation
We use cookies to give you a better experience, if that’s ok you can close this message and carry on browsing. For more info read our cookies policy.
We use cookies to give you a better experience. Carry on browsing if you're happy with this, or read our cookies policy for more information.

Pattern Library
Icons

We currently have mix of icon font icons and SVG icons in use because we are in the process of gradually transitioning to SVG icons.

SVG icons

These are the currently available SVG icons that have been converted from the icon font so far.

To use an SVG icon render the partial using the name from the key below:

= render partial: "shared/svg_icons/icon_name"
alert
arrow
arrow_down
awards
awards_outlined
awards_sparks
awards_with_sparks
business_and_management
calendar
certificates
cmt_open
coin
conversation
courses
courses courses_with_face
create
cross
device_desktop
device_laptop
device_mobile
device_tablet
download
edit_admin
educator
flag
globe
home
hourglass
hours_pw
icon_preview
id_card
infinity
learning_manager
like_empty
like_filled
lock_close
notifications
photo
profile
profile_question_mark
profile_ticked
programs programs_with_face
progress
pull
recommended
search
sentiment_negative
sentiment_neutral
sentiment_positive
settings
sign_out
steps
study_groups
tick
todo
upgrade

SVG guidelines for designers

You can design and export an SVG icon with Adobe Illustrator using this template. Use the following checklist when designing an icon to make sure we retain consistency:

  • Ensure the artboard is 32px square
  • Use a 2px stroke width to design the icon
  • Use FL black colour, unless you need to specify a certain shade
  • Ensure all objects are ungrouped
  • Before saving, convert strokes to outlines

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

AI export options

SVG guidelines for developers

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

  • Remove XML processing instructions, xmlns and other unnecessary attributes
  • 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
  • Add the .a-svg-icon class plus a modifier class with the icon name

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

Icon font

Our icon suite is contained within a bespoke font called ‘FutureDings’. Downloading this font will give you full access to all of the icons shown. The icon suite is occasionally edited by the design team at FutureLearn. Be sure you have the latest version of the icon suite before using it.

Instructions for updating the font are in the developer guidelines on the wiki.

We have 61 icons in use at the moment, each with its own short code.

Note: We are gradually phasing out the use of the icon font in favour of SVGs.

Download font

= icon_tag(:pull)
becomes:
<i data-icon="7" aria-hidden="true"></i>

_facebook 2

_gplus 4

_linkedin 6

_twitter 8

_youtube 9

activity b

address π

alert i

arrow 5

awards 0

basket ¨

burger

calendar f

certificates [

cmt_close ß

cmt_open !

conversation '

create y

cross ¥

download x

duration w

educator v

enrol 3

flag 1

globe $

home s

hours_pw r

info

launch ¡

like_empty a

like_filled d

link %

lock_close l

lock_open j

mail o

mail_social u

notice £

notifications p

profile m

progress k

pull 7

scroll_down z

settings h

sign_out g

steps n

study_groups t

tick œ

todo q

upgrade @

courses e

v_fullsc "

v_pause &

v_play +

v_play_lg ,

v_smallsc #

v_sound_full (

v_sound_low )

v_sound_mute .

v_sound_off *

v_subtitles -

youtube c