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 <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 |
---|---|---|

|
.adb-icon__appdirect
|
|

|
.adb-icon__jbilling
|
|

|
.adb-icon__standing_cloud
|
Integrated Technologies
Example | Unicode | Class Name |
---|---|---|

|
.adb-icon__apple
|
|

|
.adb-icon__microsoft
|
|

|
.adb-icon__rss
|
|

|
.adb-icon__jira
|
|

|
.adb-icon__confluence
|
Social Networks
Example | Unicode | Class Name |
---|---|---|

|
.adb-icon__facebook
|
|

|
.adb-icon__yahoo
|
|

|
.adb-icon__twitter
|
|

|
.adb-icon__tumblr
|
|

|
.adb-icon__linkedin
|
|

|
.adb-icon__instagram
|
|

|
.adb-icon__google
|
Marketplace Symbols
Example | Unicode | Class Name |
---|---|---|

|
.adb-icon__app
|
|

|
.adb-icon__apps
|
|

|
.adb-icon__briefcase
|
|

|
.adb-icon__subscription
|
|

|
.adb-icon__tag
|
|

|
.adb-icon__cart
|
|

|
.adb-icon__credit_card
.adb-icon__payment
|
|

|
.adb-icon__credit_card_small
|
|

|
.adb-icon__user
|
|

|
.adb-icon__users
.adb-icon__group
|
|

|
.adb-icon__building
.adb-icon__company
|
|

|
.adb-icon__marketplace
.adb-icon__store
|
|

|
.adb-icon__network
.adb-icon__reseller
|
Content Symbols
Example | Unicode | Class Name |
---|---|---|

|
.adb-icon__code
|
|

|
.adb-icon__image
.adb-icon__images
|
|

|
.adb-icon__screenshot
|
|

|
.adb-icon__video
.adb-icon__play
|
|

|
.adb-icon__text
.adb-icon__paragraph
|
|

|
.adb-icon__quote
.adb-icon__chat
.adb-icon__faq
|
|

|
.adb-icon__file
.adb-icon__document
|
|

|
.adb-icon__graph_line
|
|

|
.adb-icon__graph_pie
|
|

|
.adb-icon__graph_bar
|
|

|
.adb-icon__book
|
|

|
.adb-icon__newspaper
|
|

|
.adb-icon__inbox
|
|

|
.adb-icon__calendar
|
|

|
.adb-icon__keyhole
.adb-icon__username
|
|

|
.adb-icon__key
.adb-icon__password
|
|

|
.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 |
---|---|---|

|
.adb-icon__alert
.adb-icon__warning
.adb-icon__exclamation_circle
|
|

|
.adb-icon__error
.adb-icon__exclamation_triangle
|
|

|
.adb-icon__success
.adb-icon__check_circle
|
|

|
.adb-icon__tip
.adb-icon__info
.adb-icon__question
.adb-icon__question_circle
|
|

|
.adb-icon__special
.adb-icon__star_circle
|
|

|
.adb-icon__extra
.adb-icon__info_more
.adb-icon__ellipsis_circle
|
Emoticons
Example | Unicode | Class Name |
---|---|---|

|
.adb-icon__smile
|
|

|
.adb-icon__frown
|
|

|
.adb-icon__smile_big
|
|

|
.adb-icon__frown_big
|
|

|
.adb-icon__wink
|
|

|
.adb-icon__smile_wink
|
Action Symbols
Transfer
Example | Unicode | Class Name |
---|---|---|

|
.adb-icon__download
|
|

|
.adb-icon__upload
|
|

|
.adb-icon__import
|
|

|
.adb-icon__sync
|
|

|
.adb-icon__send
.adb-icon__envelope
|
|

|
.adb-icon__share
|
Edit
Example | Unicode | Class Name |
---|---|---|

|
.adb-icon__add
.adb-icon__plus_circle
|
|

|
.adb-icon__remove
.adb-icon__minus_circle
|
|

|
.adb-icon__delete
.adb-_circle
|
|

|
.adb-icon__edit
.adb-icon__pencil
|
|

|
.adb-icon__trash
|
|

|
.adb-icon__reorder
|
|

|
.adb-icon__undo
|
|

|
.adb-icon__redo
|
|

|
.adb-icon__copy
|
|

|
.adb-icon__link
|
|

|
.adb-icon__unlink
|
Manage
Example | Unicode | Class Name |
---|---|---|

|
.adb-icon__cog
|
|

|
.adb-icon__cog_alt
|
|

|
.adb-icon__cogs
|
|

|
.adb-icon__tools
|
|

|
.adb-icon__screwdriver
|
|

|
.adb-icon__wrench
|
Navigate
Example | Unicode | Class Name |
---|---|---|

|
.adb-icon__search
|
|

|
.adb-icon__x
.adb-icon__close
|
|

|
.adb-icon__x_medium
|
|

|
.adb-icon__x_small
|
|

|
.adb-icon__dropdown
|
|

|
.adb-icon__eye
.adb-icon__view
.adb-icon__show
|
|

|
.adb-icon__home
|
|

|
.adb-icon__grid
|
|

|
.adb-icon__list
|
|

|
.adb-icon__folder_open
|
|

|
.adb-icon__folder_closed
|
|

|
.adb-icon__module
.adb-icon__new_window
.adb-icon__open
|
|

|
.adb-icon__refresh
|
|

|
.adb-icon__switch
|
Notched Arrows
Example | Unicode | Class Name |
---|---|---|

|
.adb-icon__arrow_left
|
|

|
.adb-icon__arrow_right
|
|

|
.adb-icon__arrow_up
|
|

|
.adb-icon__arrow_down
|
|

|
.adb-icon__arrow_small_left
|
|

|
.adb-icon__arrow_small_right
|
|

|
.adb-icon__arrow_small_up
|
|

|
.adb-icon__arrow_small_down
|
Angle Arrows
Example | Unicode | Class Name |
---|---|---|

|
.adb-icon__angle_left
|
|

|
.adb-icon__angle_right
|
|

|
.adb-icon__angle_up
|
|

|
.adb-icon__angle_down
|
|

|
.adb-icon__angle_double_left
|
|

|
.adb-icon__angle_double_right
|
|

|
.adb-icon__angle_double_up
|
|

|
.adb-icon__angle_double_down
|
Triangle Arrows
Example | Unicode | Class Name |
---|---|---|

|
.adb-icon__triangle_left
|
|

|
.adb-icon__triangle_right
|
|

|
.adb-icon__triangle_up
|
|

|
.adb-icon__triangle_up
|
|

|
.adb-icon__triangle_small_left
|
|

|
.adb-icon__triangle_small_right
|
|

|
.adb-icon__triangle_small_up
|
|

|
.adb-icon__triangle_small_down
|
React
Example | Unicode | Class Name |
---|---|---|

|
.adb-icon__star
.adb-icon__favorite
|
|

|
.adb-icon__heart
.adb-icon__love
|
|

|
.adb-icon__like
.adb-icon__thumb_up
|
|

|
.adb-icon__dislike
.adb-icon__thumb_down
|
|

|
.adb-icon__comment
|
|

|
.adb-icon__bookmark
|
Descriptive Icons
Example | Unicode | Class Name |
---|---|---|

|
.adb-icon__plus
.adb-icon__additional
|
|

|
.adb-icon__minus
.adb-icon__without
|
|

|
.adb-icon__check
.adb-icon__included
.adb-icon__yes
|
|

|
.adb-icon__not_allowed
.adb-icon__no
.adb-icon__stop
|
|

|
.adb-icon__ellipsis
|
|

|
.adb-icon__bolt
.adb-icon__new
|
|

|
.adb-icon__lock
.adb-icon__secure
.adb-icon__private
|
|

|
.adb-icon__dot
|
|

|
.adb-icon__box
|
|

|
.adb-icon__bell
.adb-icon__update
.adb-icon__alarm
|
|

|
.adb-icon__pin
.adb-icon__location
.adb-icon__map
|
|

|
.adb-icon__clock
.adb-icon__time
.adb-icon__expiring
|
|

|
.adb-icon__clock_solid
.adb-icon__time_alt
.adb-icon__expired
|
Weighted Arrows
Example | Unicode | Class Name |
---|---|---|

|
.adb-icon__arrow_thick_left
|
|

|
.adb-icon__arrow_thick_right
|
|

|
.adb-icon__arrow_thick_up
|
|

|
.adb-icon__arrow_thick_down
|
|

|
.adb-icon__arrow_thin_left
|
|

|
.adb-icon__arrow_thin_right
|
|

|
.adb-icon__arrow_thin_up
|
|

|
.adb-icon__arrow_thin_down
|