Icons

Icons in Adapt

A font set called vanilla is used to display icons within Adapt and is bundled, as standard, with the Adapt Framework.

An overview of all available icons can be found below:

Adding icons inline

The Vanilla theme supports the addition of an inline icon within the text content. This can be achieved by adding the following:

<span class='icon icon-arrow-down-2 inline-icon' aria-hidden='true'></span>

e.g.

Lorem ipsum dolor sit amet <span class='icon icon-arrow-down-2 inline-icon' aria-hidden='true'></span> consectetur adipiscing elit.

Each of the classes have a specific function and are required alongside the attribute.

Class	Description
icon	The global icon class responsible for setting the required styles for icons.
icon-arrow-down-2	The icon class that you wish to use. See the icon breakdown tables below to find a list of available icons.
inline-icon	The custom class required to align the icons correctly with the text.

The aria-hidden attribute is required to remove the icon from the screen reader read order.

Customising icons

It is possible to expand upon the standard icon set by either editing existing or adding new icons.

To get started import the selection.json file into the Icomoon App and select 'Yes' when asked prompted to load all settings stored in the file. This will load the standard icon set into the app and pre-select them all.

Editing existing icons

With all the icons selected press the 'Generate Font' button in the lower right hand side of the screen. Selecting this button will generate the icons and show their associated content ID values. Selecting the visual representation of an icon will open an overlay where properties such as rotation, position, and size can be modified. Alternatively an icon can be replaced entirely by using the 'Replace' button. When ready select the 'Download' button to receive the modified vanilla icon set.

It is highly recommended that any customisations done to the standard icon set be loaded in as a separate font as part of the theme.

Adding new icons

Ensure that any new icons being added to the icon set are saved as an .svg and are created using fills rather than strokes as the latter is not supported.

Select the 'Import Icons' button from the main navigation bar in the upper left hand side of the screen and choose the new icons to add to the font set. This will load the chosen icons into the apps interface, from here select the new icons and then press 'Generate Font' button in the lower right hand side of the screen. The new icons will be generated unique content ID values that continue on from the standard set. If any edits to the icons are required they can be done from this screen, otherwise select the 'Download' button to receive the modified vanilla icon set.

It is highly recommended that any customisations done to the standard icon set be loaded in as a separate font as part of the theme.

Adding a new icon font set to Adapt

Coming soon.

Icon breakdown

Icon	CSS class name	Content ID	Icon	CSS class name	Content ID
arrow-with-circle-down	.icon-arrow-with-circle-down	e900	arrow-with-circle-left	.icon-arrow-with-circle-left	e901
arrow-with-circle-right	.icon-arrow-with-circle-right	e902	arrow-with-circle-up	.icon-arrow-with-circle-up	e903
chevron-with-circle-down	.icon-chevron-with-circle-down	e904	chevron-with-circle-left	.icon-chevron-with-circle-left	e905
chevron-with-circle-right	.icon-chevron-with-circle-right	e906	chevron-with-circle-up	.icon-chevron-with-circle-up	e907
info-with-circle	.icon-info-with-circle	e908	location	.icon-location	e909
medal	.icon-medal	e90a	price-ribbon	.icon-price-ribbon	e90b
shield	.icon-shield	e90c	stopwatch	.icon-stopwatch	e90d
text-document-inverted	.icon-text-document-inverted	e90e	text-document	.icon-text-document	e90f

Icon	CSS class name	Content ID	Icon	CSS class name	Content ID
trophy	.icon-trophy	e910	arrow-down	.icon-arrow-down	e911
arrow-left	.icon-arrow-left	e912	arrow-right	.icon-arrow-right	e913
arrow-up	.icon-arrow-up	e914	bookmark	.icon-bookmark	e915
message	.icon-message	e916	mouse	.icon-mouse	e917
mobile	.icon-mobile	e918	desktop	.icon-desktop	e919
pencil	.icon-pencil	e91a	forward-arrow	.icon-forward-arrow	e91b
backwards-arrow	.icon-backwards-arrow	e91c	person	.icon-person	e91d
persons	.icon-persons	e91e	profile	.icon-profile	e91f

Icon	CSS class name	Content ID	Icon	CSS class name	Content ID
pin	.icon-pin	e920	map	.icon-map	e921
point	.icon-point	e922	star	.icon-star	e923
star-hollow	.icon-star-hollow	e924	comments	.icon-comments	e925
comment	.icon-comment	e926	home	.icon-home	e927
popup	.icon-popup	e928	search	.icon-search	e929
printer	.icon-printer	e92a	link	.icon-link	e92b
flag	.icon-flag	e92c	cog	.icon-cog	e92d
tools	.icon-tools	e92e	tag	.icon-tag	e92f

Icon	CSS class name	Content ID	Icon	CSS class name	Content ID
camera	.icon-camera	e930	feedback	.icon-feedback	e931
book	.icon-book	e932	article	.icon-article	e933
eye	.icon-eye	e934	time	.icon-time	e935
microphone	.icon-microphone	e936	calendar	.icon-calendar	e937
timer	.icon-timer	e938	drag	.icon-drag	e939
light-bulb	.icon-light-bulb	e93a	checklist	.icon-checklist	e93b
ticket	.icon-ticket	e93c	wi-fi	.icon-wi-fi	e93d
line-graph	.icon-line-graph	e93e	pie-chart	.icon-pie-chart	e93f

Icon	CSS class name	Content ID	Icon	CSS class name	Content ID
bar-graph	.icon-bar-graph	e940	scatter-graph	.icon-scatter-graph	e941
padlock-locked	.icon-padlock-locked	e942	padlock-unlocked	.icon-padlock-unlocked	e943
tick	.icon-tick	e944	cross	.icon-cross	e945
minus	.icon-minus	e946	plus	.icon-plus	e947
info	.icon-info	e948	question	.icon-question	e949
warning	.icon-warning	e94a	list	.icon-list	e94b
add-to-list	.icon-add-to-list	e94c	menu	.icon-menu	e94d
grid	.icon-grid	e94e	portrait	.icon-portrait	e94f

Icon	CSS class name	Content ID	Icon	CSS class name	Content ID
screens	.icon-screens	e950	landscape	.icon-landscape	e951
images	.icon-images	e952	media	.icon-media	e953
folder	.icon-folder	e954	documents	.icon-documents	e955
delete	.icon-delete	e956	save	.icon-save	e957
download	.icon-download	e958	upload	.icon-upload	e959
expand	.icon-expand	e95a	shrink	.icon-shrink	e95b
volume	.icon-volume	e95c	sound	.icon-sound	e95d
sound-mute	.icon-sound-mute	e95e	controls-down	.icon-controls-down	e95f

Icon	CSS class name	Content ID	Icon	CSS class name	Content ID
controls-left	.icon-controls-left	e960	controls-right	.icon-controls-right	e961
controls-up	.icon-controls-up	e962	triangle-down	.icon-triangle-down	e963
triangle-left	.icon-triangle-left	e964	triangle-right	.icon-triangle-right	e965
triangle-up	.icon-triangle-up	e966	dot	.icon-dot	e967
ellipsis	.icon-ellipsis	e968	up-down	.icon-up-down	e969
controls-small-down	.icon-controls-small-down	e96a	controls-small-left	.icon-controls-small-left	e96b
controls-small-right	.icon-controls-small-right	e96c	controls-small-up	.icon-controls-small-up	e96d
radio-checked	.icon-radio-checked	e96e	radio-unchecked	.icon-radio-unchecked	e96f

Icon	CSS class name	Content ID	Icon	CSS class name	Content ID
language-1	.icon-language-1	e970	accessibility	.icon-accessibility	e971
globe	.icon-globe	e972	language-2	.icon-language-2	e973
checkbox-checked	.icon-checkbox-checked	e974	checkbox-unchecked	.icon-checkbox-unchecked	e975
accessibility-2	.icon-accessibility-2	e976	alert	.icon-alert	e977
arrow-down-2	.icon-arrow-down-2	e978	arrow-left-2	.icon-arrow-left-2	e979
arrow-right-2	.icon-arrow-right-2	e97a	arrow-up-2	.icon-arrow-up-2	e97b
arrow-down-3	.icon-arrow-down-3	e97c	arrow-left-3	.icon-arrow-left-3	e97d
arrow-right-3	.icon-arrow-right-3	e97e	arrow-up-3	.icon-arrow-up-3	e97f

Icon	CSS class name	Content ID	Icon	CSS class name	Content ID
attachment	.icon-attachment	e980	block	.icon-block	e981
camera-off	.icon-camera-off	e982	camera-on	.icon-camera-on	e983
cloud	.icon-cloud	e984	compass	.icon-compass	e985
copy-file	.icon-copy-file	e986	copyright	.icon-copyright	e987
crop	.icon-crop	e988	devices	.icon-devices	e989
down-up	.icon-down-up	e98a	ellipsis-vertical	.icon-ellipsis-vertical	e98b
exlcamation	.icon-exlcamation	e98c	expand_1	.icon-expand_1	e98d
extension	.icon-extension	e98e	favourite	.icon-favourite	e98f

Icon	CSS class name	Content ID	Icon	CSS class name	Content ID
google-translate	.icon-google-translate	e990	hand	.icon-hand	e991
lightning	.icon-lightning	e992	list-2	.icon-list-2	e993
microphone-off	.icon-microphone-off	e994	move	.icon-move	e995
mute	.icon-mute	e996	ordered-list	.icon-ordered-list	e997
question-circle	.icon-question-circle	e998	quote-close	.icon-quote-close	e999
quote-open	.icon-quote-open	e99a	refresh	.icon-refresh	e99b
send	.icon-send	e99c	sound-down	.icon-sound-down	e99d
sync	.icon-sync	e99e	tablet	.icon-tablet	e99f

Icon	CSS class name	Content ID	Icon	CSS class name	Content ID
thumb-down	.icon-thumb-down	e9a0	thumb-up	.icon-thumb-up	e9a1
timer-empty	.icon-timer-empty	e9a2	timer-full	.icon-timer-full	e9a3
video-captions-off-2	.icon-video-captions-off-2	e9a4	video-captions-off	.icon-video-captions-off	e9a5
video-captions	.icon-video-captions	e9a6	video-exit-fullscreen	.icon-video-exit-fullscreen	e9a7
video-fast-forward	.icon-video-fast-forward	e9a8	video-fullscreen	.icon-video-fullscreen	e9a9
video-loop	.icon-video-loop	e9aa	video-pause-circle	.icon-video-pause-circle	e9ab
video-pause	.icon-video-pause	e9ac	video-play-circle	.icon-video-play-circle	e9ad
video-play	.icon-video-play	e9ae	video-replay	.icon-video-replay	e9af

Icon	CSS class name	Content ID	Icon	CSS class name	Content ID
video-rewind	.icon-video-rewind	e9b0	video-skip-back	.icon-video-skip-back	e9b1
video-skip-forward	.icon-video-skip-forward	e9b2	video-stop	.icon-video-stop	e9b3
quote-close-2	.icon-quote-close-2	e9b4	quote-open-2	.icon-quote-open-2	e9b5
emotion-happy	.icon-emotion-happy	e9b6	emotion-not-ok	.icon-emotion-not-ok	e9b7
emotion-ok	.icon-emotion-ok	e9b8	emotion-sad	.icon-emotion-sad	e9b9
emotion-very-happy	.icon-emotion-very-happy	e9ba	emotion-very-unhappy	.icon-emotion-very-unhappy	e9bb
blogger-2	.icon-blogger-2	e9bc	blogger	.icon-blogger	e9bd
deviantart-2	.icon-deviantart-2	e9be	deviantart	.icon-deviantart	e9bf

Icon	CSS class name	Content ID	Icon	CSS class name	Content ID
doc-excel	.icon-doc-excel	e9c0	doc-pdf	.icon-doc-pdf	e9c1
doc-word	.icon-doc-word	e9c2	facebook-2	.icon-facebook-2	e9c3
facebook	.icon-facebook	e9c4	flickr-2	.icon-flickr-2	e9c5
flickr	.icon-flickr	e9c6	github	.icon-github	e9c7
instagram-2	.icon-instagram-2	e9c8	instagram	.icon-instagram	e9c9
linkedin-2	.icon-linkedin-2	e9ca	linkedin	.icon-linkedin	e9cb
paypal	.icon-paypal	e9cc	pintrest-2	.icon-pintrest-2	e9cd
pintrest	.icon-pintrest	e9ce	qq-2	.icon-qq-2	e9cf

Icon	CSS class name	Content ID	Icon	CSS class name	Content ID
qq	.icon-qq	e9d0	reddit-2	.icon-reddit-2	e9d1
reddit	.icon-reddit	e9d2	rss-2	.icon-rss-2	e9d3
rss	.icon-rss	e9d4	sina-weibo-2	.icon-sina-weibo-2	e9d5
sina-weibo	.icon-sina-weibo	e9d6	soundcloud-2	.icon-soundcloud-2	e9d7
soundcloud	.icon-soundcloud	e9d8	steam-2	.icon-steam-2	e9d9
steam	.icon-steam	e9da	trello-2	.icon-trello-2	e9db
trello	.icon-trello	e9dc	tumbler-2	.icon-tumbler-2	e9dd
tumblr	.icon-tumblr	e9de	twitch	.icon-twitch	e9df

Icon	CSS class name	Content ID	Icon	CSS class name	Content ID
twitter-2	.icon-twitter-2	e9e0	twitter	.icon-twitter	e9e1
vimeo-2	.icon-vimeo-2	e9e2	vimeo	.icon-vimeo	e9e3
wechat-2	.icon-wechat-2	e9e4	wechat	.icon-wechat	e9e5
weibo-2	.icon-weibo-2	e9e6	weibo	.icon-weibo	e9e7
xing-2	.icon-xing-2	e9e8	xing	.icon-xing	e9e9
youku-2	.icon-youku-2	e9ea	youku	.icon-youku	e9eb
youtube-2	.icon-youtube-2	e9ec	youtube	.icon-youtube	e9ed