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, SVG icons partials and standard SVG icons in use. We are gradually transitioning to the latter.

SVG icons

This is now the preferred approach for creating and rendering icons in the application.

To use an icon, call the svg_icon helper with the icon name:

= svg_icon :reply
activity
alert
arrow_down
bookmark_empty
bookmark_filled
calendar
certificates
cmt_open
configure
courses
cross
download
edit
enrol
globe
hourglass
hours_pw
import
info
like_filled
link
lock_close
mail
minus
minus_in_box
pin
pin_filled
plus
plus_in_box
preview
progress
remove_learner
reply
retire
sentiment_negative
star
star_filled
stats
steps
study_groups
tick
todo
upgrade

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

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

SVG icon partials

Note: We are gradually phasing out the use of the SVG icon partials in favour of standard SVG icons.

General

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

 = render partial: "shared/svg_icons/icon_name" 
accreditation
activity
alert
announcements
arrow
arrow_down
awards
awards_outlined
awards_sparks
awards_with_sparks
book
bookmark_empty
bookmark_filled
business_and_management_courses
calendar
certificates
cmt_close
cmt_open
coin
conversation
course
courses
courses courses_with_face
create
cross
deakin_sync
degree
device_desktop
device_laptop
device_mobile
device_tablet
edit_admin
educator
enrol
fl_logo_white
flag
generate
globe
home
hourglass
hours_pw
icon_preview
id_card
infinity
learning_manager
like_empty
like_filled
link
lock_close
notifications
overview
photo
pin
pin_filled
portfolio
profile
profile_question_mark
profile_ticked
programs programs_with_face
progress
provisional
pull
question
recommended
remove_learner
reply
resources
Search search
sentiment_negative
sentiment_neutral
sentiment_positive
settings
sign_out
social
sponsored
star
star_filled
steps
study_groups
teaching
tick
todo
upgrade

Sharing

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

 = render partial: "shared/svg_icons/sharing/icon_name" 
email
facebook
google_plus
linkedin
twitter
whatsapp

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 icon creative_arts_and_media_courses
Health and psychology icon health_and_psychology_courses
History icon history_courses
languages_and_cultures_courses
Law icon law_courses
Literature icon literature_courses
Nature and environment icon nature_and_environment_courses
Politics and the modern world icon politics_and_the_modern_world_courses
Science, engineering and maths icon science_engineering_and_maths_courses
Study skills icon study_skills_courses
Teaching icon teaching_courses
Tech and coding icon tech_and_coding_courses

Guidelines for designers

For designers, the guidelines are the same as for standard SVG icons.

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_legacy_partials.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