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.

General

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
bookmark_empty
bookmark_filled
business_and_management_courses
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
generate
globe
home
hourglass
hours_pw
icon_preview
id_card
infinity
learning_manager
like_empty
like_filled
link
lock_close
notifications
photo
pin
profile
profile_question_mark
profile_ticked
programs programs_with_face
progress
provisional
pull
recommended
reply
search
sentiment_negative
sentiment_neutral
sentiment_positive
settings
sign_out
steps
study_groups
tick
todo
upgrade

Subject categories

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

= render partial: "shared/svg_icons/subject_categories/icon_name"
Business-and-management-icon business_and_management_courses
creative-arts-and-media creative_arts_and_media_courses
health health_and_psychology_courses
history history_courses
languages languages_and_cultures_courses
law law_courses
literature literature_courses
nature nature_and_environment_courses
politics_and_the_modern_world_courses
Science, Engineering & Maths science_engineering_and_maths_courses
study-skills study_skills_courses
teaching teaching_courses
tech-and-coding tech_and_coding_courses

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