Iconography

Overview

The icons in the following icon font are optimized for display at 16px. They scale cleanly to 32px but also hold up nicely at sizes in-between. Although the default font size is 14px, icons using standard markup will display at 16px and scale at the same ratio when the font size changes.

You can use any tag to insert an icon as long as you add the .adb-icon class. We prefer <i/> because it is an inline element that is not <span/> (and icons begin with the letter i). Add a second class, such as .adb-icon__user, to identify the specific icon.

The user purchased an application for her company . 
The user
<i class="adb-icon__user"></i>
purchased
<i class="adb-icon__credit_card"></i>
an application
<i class="adb-icon__app"></i>
for her company
<i class="adb-icon__company"></i>
.

See Buttons for how to format icons in buttons.

Logos

AppDirect Ecosystem

Example Unicode Class Name
&#xe640; .adb-icon__appdirect
&#xe63f; .adb-icon__jbilling
&#xe63e; .adb-icon__standing_cloud

Integrated Technologies

Example Unicode Class Name
&#xe648; .adb-icon__apple
&#xe645; .adb-icon__microsoft
&#xe651; .adb-icon__rss
&#xe623; .adb-icon__jira
&#xe627; .adb-icon__confluence

Social Networks

Example Unicode Class Name
&#xe626; .adb-icon__facebook
&#xe61f; .adb-icon__yahoo
&#xe620; .adb-icon__twitter
&#xe621; .adb-icon__tumblr
&#xe622; .adb-icon__linkedin
&#xe624; .adb-icon__instagram
&#xe625; .adb-icon__google

Marketplace Symbols

Example Unicode Class Name
&#xe00e; .adb-icon__app
&#xe63d; .adb-icon__apps
&#xe64a; .adb-icon__briefcase
&#xe653; .adb-icon__subscription
&#xe019; .adb-icon__tag
&#xe652; .adb-icon__cart
&#xe008; .adb-icon__credit_card .adb-icon__payment
&#xe01c; .adb-icon__credit_card_small
&#xe012; .adb-icon__user
&#xe013; .adb-icon__users .adb-icon__group
&#xe64b; .adb-icon__building .adb-icon__company
&#xe637; .adb-icon__marketplace .adb-icon__store
&#xe016; .adb-icon__network .adb-icon__reseller

Content Symbols

Example Unicode Class Name
&#xe002; .adb-icon__code
&#xe60a; .adb-icon__image .adb-icon__images
&#xe01a; .adb-icon__screenshot
&#xe03c; .adb-icon__video .adb-icon__play
&#xe609; .adb-icon__text .adb-icon__paragraph
&#xe607; .adb-icon__quote .adb-icon__chat .adb-icon__faq
&#xe01d; .adb-icon__file .adb-icon__document
&#xe62f; .adb-icon__graph_line
&#xe632; .adb-icon__graph_pie
&#xe635; .adb-icon__graph_bar
&#xe604; .adb-icon__book
&#xe606; .adb-icon__newspaper
&#xe64d; .adb-icon__inbox
&#xe612; .adb-icon__calendar
&#xe634; .adb-icon__keyhole .adb-icon__username
&#xe611; .adb-icon__key .adb-icon__password
&#xe64e; .adb-icon__fingerprint

System Information

Feedback icons respond to user input in contexts such as form validation, warning messages and ratings. They should vary in color according to the type of feedback. For example, when a user enters an email address incorrectly, the response message should include a red error icon.

Example Unicode Class Name
&#xe00a; .adb-icon__alert .adb-icon__warning .adb-icon__exclamation_circle
&#xe00b; .adb-icon__error .adb-icon__exclamation_triangle
&#xe009; .adb-icon__success .adb-icon__check_circle
&#xe01e; .adb-icon__tip .adb-icon__info .adb-icon__question .adb-icon__question_circle
&#xe00f; .adb-icon__special .adb-icon__star_circle
&#xe61d; .adb-icon__extra .adb-icon__info_more .adb-icon__ellipsis_circle

Emoticons

Example Unicode Class Name
&#xe629; .adb-icon__smile
&#xe62c; .adb-icon__frown
&#xe62b; .adb-icon__smile_big
&#xe62d; .adb-icon__frown_big
&#xe628; .adb-icon__wink
&#xe62a; .adb-icon__smile_wink

Action Symbols

Transfer

Example Unicode Class Name
&#xe022; .adb-icon__download
&#xe63c; .adb-icon__upload
&#xe64f; .adb-icon__import
&#xe654; .adb-icon__sync
&#xe011; .adb-icon__send .adb-icon__envelope
&#xe613; .adb-icon__share

Edit

Example Unicode Class Name
&#xe026; .adb-icon__add .adb-icon__plus_circle
&#xe027; .adb-icon__remove .adb-icon__minus_circle
&#xe000; .adb-icon__delete .adb-_circle
&#xe010; .adb-icon__edit .adb-icon__pencil
&#xe01b; .adb-icon__trash
&#xe025; .adb-icon__reorder
&#xe02a; .adb-icon__undo
&#xe02b; .adb-icon__redo
&#xe64c; .adb-icon__copy
&#xe023; .adb-icon__link
&#xe024; .adb-icon__unlink

Manage

Example Unicode Class Name
&#xe015; .adb-icon__cog
&#xe014; .adb-icon__cog_alt
&#xe646; .adb-icon__cogs
&#xe041; .adb-icon__tools
&#xe044; .adb-icon__screwdriver
&#xe031; .adb-icon__wrench

Navigate

Example Unicode Class Name
&#xe03e; .adb-icon__search
&#xe020; .adb-icon__x .adb-icon__close
&#xe603; .adb-icon__x_medium
&#xe01f; .adb-icon__x_small
&#xe61e; .adb-icon__dropdown
&#xe600; .adb-icon__eye .adb-icon__view .adb-icon__show
&#xe03b; .adb-icon__home
&#xe028; .adb-icon__grid
&#xe029; .adb-icon__list
&#xe60b; .adb-icon__folder_open
&#xe60c; .adb-icon__folder_closed
&#xe614; .adb-icon__module .adb-icon__new_window .adb-icon__open
&#xe03d; .adb-icon__refresh
&#xe02c; .adb-icon__switch
Notched Arrows
Example Unicode Class Name
&#xe034; .adb-icon__arrow_left
&#xe035; .adb-icon__arrow_right
&#xe039; .adb-icon__arrow_up
&#xe038; .adb-icon__arrow_down
&#xe032; .adb-icon__arrow_small_left
&#xe033; .adb-icon__arrow_small_right
&#xe037; .adb-icon__arrow_small_up
&#xe036; .adb-icon__arrow_small_down
Angle Arrows
Example Unicode Class Name
&#xe02d; .adb-icon__angle_left
&#xe02e; .adb-icon__angle_right
&#xe60f; .adb-icon__angle_up
&#xe610; .adb-icon__angle_down
&#xe63a; .adb-icon__angle_double_left
&#xe639; .adb-icon__angle_double_right
&#xe638; .adb-icon__angle_double_up
&#xe63b; .adb-icon__angle_double_down
Triangle Arrows
Example Unicode Class Name
&#xe02f; .adb-icon__triangle_left
&#xe030; .adb-icon__triangle_right
&#xe601; .adb-icon__triangle_up
&#xe602; .adb-icon__triangle_up
&#xe006; .adb-icon__triangle_small_left
&#xe005; .adb-icon__triangle_small_right
&#xe004; .adb-icon__triangle_small_up
&#xe007; .adb-icon__triangle_small_down

React

Example Unicode Class Name
&#xe00c; .adb-icon__star .adb-icon__favorite
&#xe636; .adb-icon__heart .adb-icon__love
&#xe642; .adb-icon__like .adb-icon__thumb_up
&#xe643; .adb-icon__dislike .adb-icon__thumb_down
&#xe017; .adb-icon__comment
&#xe649; .adb-icon__bookmark

Descriptive Icons

Example Unicode Class Name
&#xe631; .adb-icon__plus .adb-icon__additional
&#xe62e; .adb-icon__minus .adb-icon__without
&#xe003; .adb-icon__check .adb-icon__included .adb-icon__yes
&#xe630; .adb-icon__not_allowed .adb-icon__no .adb-icon__stop
&#xe001; .adb-icon__ellipsis
&#xe647; .adb-icon__bolt .adb-icon__new
&#xe633; .adb-icon__lock .adb-icon__secure .adb-icon__private
&#xe60d; .adb-icon__dot
&#xe60e; .adb-icon__box
&#xe608; .adb-icon__bell .adb-icon__update .adb-icon__alarm
&#xe605; .adb-icon__pin .adb-icon__location .adb-icon__map
&#xe018; .adb-icon__clock .adb-icon__time .adb-icon__expiring
&#xe03a; .adb-icon__clock_solid .adb-icon__time_alt .adb-icon__expired

Weighted Arrows

Example Unicode Class Name
&#xe617; .adb-icon__arrow_thick_left
&#xe616; .adb-icon__arrow_thick_right
&#xe615; .adb-icon__arrow_thick_up
&#xe618; .adb-icon__arrow_thick_down
&#xe61b; .adb-icon__arrow_thin_left
&#xe61a; .adb-icon__arrow_thin_right
&#xe619; .adb-icon__arrow_thin_up
&#xe61c; .adb-icon__arrow_thin_down