Base by AppDirect

Guidelines

Foundational principles, guidelines and styles

Iconography & UIF Icon Font

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.

UIF Icon Font 2.9

Downloading and installing the Icon Font version 2.9

The latest version can be downloaded as True Type Font AppDirectIcons.ttf and more formats are located in the UIF Base Font Repository.
Instructions how to update the icons are in the UIF Icons Repository Wiki.

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.

Icon Size

Logos

AppDirect Ecosystem

Example Unicode Class Name Glyph SVG
&#xe640; .adb-icon__appdirect SVG PNG
&#xe63f; .adb-icon__jbilling SVG PNG
&#xe63e; .adb-icon__standing_cloud SVG PNG
&#xe904; .adb-icon__leftronic SVG PNG
&#xe968; .adb-icon__app_devices SVG PNG

Integrated Technologies

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

Social Networks

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

Marketplace Symbols

Example Unicode Class Name Glyph SVG
&#xe00e; .adb-icon__app SVG PNG
&#xe63d; .adb-icon__apps SVG PNG
&#xe64a; .adb-icon__briefcase SVG PNG
&#xe653; .adb-icon__subscription SVG PNG
&#xe019; .adb-icon__tag SVG PNG
&#xe652; .adb-icon__cart SVG PNG
&#xe008; .adb-icon__credit_card .adb-icon__payment SVG PNG
&#xe984; .adb-icon__credit_card_stripe SVG PNG
&#xe985; .adb-icon__payment_error SVG PNG
&#xe986; .adb-icon__payment_approved SVG PNG
&#xe012; .adb-icon__user SVG PNG
&#xe013; .adb-icon__users .adb-icon__group SVG PNG
&#xe64b; .adb-icon__building .adb-icon__company SVG PNG
&#xe637; .adb-icon__marketplace .adb-icon__store SVG PNG
&#xe016; .adb-icon__network .adb-icon__reseller SVG PNG
&#xe900; .adb-icon__network .adb-icon__cloud SVG PNG

Content Symbols

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

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 Glyph SVG
&#xe00a; .adb-icon__alert .adb-icon__warning .adb-icon__exclamation_circle SVG PNG
&#xe982; .adb-icon__info SVG PNG
&#xe00b; .adb-icon__error .adb-icon__exclamation_triangle SVG PNG
&#xe009; .adb-icon__success .adb-icon__check_circle SVG PNG
&#xe01e; .adb-icon__tip .adb-icon__info .adb-icon__question .adb-icon__question_circle SVG PNG
&#xe00f; .adb-icon__special .adb-icon__star_circle SVG PNG
&#xe61d; .adb-icon__extra .adb-icon__info_more .adb-icon__ellipsis_circle SVG PNG

Emoticons

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

Action Symbols

Transfer

Example Unicode Class Name Glyph SVG
&#xe022; .adb-icon__download SVG PNG
&#xe63c; .adb-icon__upload SVG PNG
&#xe902; .adb-icon__import SVG PNG
&#xe654; .adb-icon__sync SVG PNG
&#xe90f; .adb-icon__no-sync SVG PNG
&#xe011; .adb-icon__send .adb-icon__envelope SVG PNG
&#xe613; .adb-icon__share SVG PNG

Edit

Example Unicode Class Name Glyph SVG
&#xe026; .adb-icon__add .adb-icon__plus_circle SVG PNG
&#xe027; .adb-icon__remove .adb-icon__minus_circle SVG PNG
&#xe000; .adb-icon__delete .adb-icon_circle SVG PNG
&#xe010; .adb-icon__edit .adb-icon__pencil SVG PNG
&#xe01b; .adb-icon__trash SVG PNG
&#xe025; .adb-icon__reorder SVG PNG
&#xe02a; .adb-icon__undo SVG PNG
&#xe02b; .adb-icon__redo SVG PNG
&#xe90b; .adb-icon__save SVG PNG
&#xe64f; .adb-icon__import_app SVG PNG
&#xe64c; .adb-icon__copy SVG PNG
&#xe023; .adb-icon__link SVG PNG
&#xe024; .adb-icon__unlink SVG PNG

Manage

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

Navigate

General Navigation
Example Unicode Class Name Glyph SVG
&#xe03e; .adb-icon__search SVG PNG
&#xe020; .adb-icon__x .adb-icon__close SVG PNG
&#xe603; .adb-icon__x_medium SVG PNG
&#xe01f; .adb-icon__x_small SVG PNG
&#xe61e; .adb-icon__dropdown SVG PNG
&#xe641; .adb-icon__eye .adb-icon__view .adb-icon__show SVG PNG
&#xe03b; .adb-icon__home SVG PNG
&#xe028; .adb-icon__grid SVG PNG
&#xe029; .adb-icon__list SVG PNG
&#xe983; .adb-icon__filter SVG PNG
&#xe60b; .adb-icon__folder_open SVG PNG
&#xe60c; .adb-icon__folder_closed SVG PNG
&#xe972; .adb-icon__folder_new SVG PNG
&#xe614; .adb-icon__module .adb-icon__new_window .adb-icon__open SVG PNG
&#xe03d; .adb-icon__refresh SVG PNG
&#xe02c; .adb-icon__switch SVG PNG
&#xe644; .adb-icon__hamburger SVG PNG
&#xe600; .adb-icon__ellipsis_hollow SVG PNG
Universal Navigation

The Universal Navigation Icons are designed specifically for use in the AppDirect global navigation to represent the suite of products. To eliminate confusion, please be cautious of using them for other purposes. The icons are aligned to each other in dimensions and spacing.

Example Unicode Class Name Glyph SVG
&#xe977; .adb-icon__universal_nav_myapps SVG PNG
&#xe976; .adb-icon__universal_nav_home SVG PNG
&#xe975; .adb-icon__universal_nav_messenger SVG PNG
&#xe974; .adb-icon__universal_nav_insights SVG PNG
&#xe973; .adb-icon__universal_nav_cart SVG PNG
Notched Arrows
Example Unicode Class Name Glyph SVG
&#xe034; .adb-icon__arrow_left SVG PNG
&#xe035; .adb-icon__arrow_right SVG PNG
&#xe039; .adb-icon__arrow_up SVG PNG
&#xe038; .adb-icon__arrow_down SVG PNG
&#xe032; .adb-icon__arrow_small_left SVG PNG
&#xe033; .adb-icon__arrow_small_right SVG PNG
&#xe037; .adb-icon__arrow_small_up SVG PNG
&#xe036; .adb-icon__arrow_small_down SVG PNG
Angle Arrows
Example Unicode Class Name Glyph SVG
&#xe02d; .adb-icon__angle_left SVG PNG
&#xe02e; .adb-icon__angle_right SVG PNG
&#xe60f; .adb-icon__angle_up SVG PNG
&#xe610; .adb-icon__angle_down SVG PNG
&#xe63a; .adb-icon__angle_double_left SVG PNG
&#xe639; .adb-icon__angle_double_right SVG PNG
&#xe638; .adb-icon__angle_double_up SVG PNG
&#xe63b; .adb-icon__angle_double_down SVG PNG
Triangle Arrows
Example Unicode Class Name Glyph SVG
&#xe02f; .adb-icon__triangle_left SVG PNG
&#xe030; .adb-icon__triangle_right SVG PNG
&#xe601; .adb-icon__triangle_up SVG PNG
&#xe602; .adb-icon__triangle_down SVG PNG
&#xe006; .adb-icon__triangle_small_left SVG PNG
&#xe005; .adb-icon__triangle_small_right SVG PNG
&#xe004; .adb-icon__triangle_small_up SVG PNG
&#xe007; .adb-icon__triangle_small_down SVG PNG

Weighted Arrows

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

React

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

Descriptive Icons

Example Unicode Class Name Glyph SVG
&#xe631; .adb-icon__plus .adb-icon__additional SVG PNG
&#xe62e; .adb-icon__minus .adb-icon__without SVG PNG
&#xe003; .adb-icon__check .adb-icon__included .adb-icon__yes SVG PNG
&#xe630; .adb-icon__stop .adb-icon__not_allowed .adb-icon__no SVG PNG
&#xe001; .adb-icon__ellipsis SVG PNG
&#xe647; .adb-icon__bolt .adb-icon__new SVG PNG
&#xe633; .adb-icon__lock .adb-icon__secure .adb-icon__private SVG PNG
&#xe90d; .adb-icon__unlock SVG PNG
&#xe905; .adb-icon__lock_wide .adb-icon__secure_wide .adb-icon__private_wide SVG PNG
&#xe914; .adb-icon__lock_without_keyhole SVG PNG
&#xe60d; .adb-icon__dot SVG PNG
&#xe970; .adb-icon__circle_solid SVG PNG
&#xe971; .adb-icon__circle_empty SVG PNG
&#xe981; .adb-icon__circle_partially_solid SVG PNG
&#xe60e; .adb-icon__box SVG PNG
&#xe608; .adb-icon__bell .adb-icon__update .adb-icon__alarm SVG PNG
&#xe605; .adb-icon__pin .adb-icon__location .adb-icon__map SVG PNG
&#xe906; .adb-icon__map_unfolded SVG PNG
&#xe018; .adb-icon__clock .adb-icon__time .adb-icon__expiring SVG PNG
&#xe03a; .adb-icon__clock_solid .adb-icon__time_alt .adb-icon__expired SVG PNG

Devices

Example Unicode Class Name Glyph SVG
&#xe901; .adb-icon__desktop .adb-icon__desktop SVG PNG
&#xe903; .adb-icon__laptop .adb-icon__laptop SVG PNG
&#xe90c; .adb-icon__tablet .adb-icon__tablet SVG PNG
&#xe907; .adb-icon__mobile .adb-icon__mobile SVG PNG
&#xe909; .adb-icon__phone .adb-icon__phone SVG PNG

Mobile Icons

Our Mobile Icons feature iconography developed especially for use on mobile end-user devices. Some of these icons might be optimized duplicates from our marketplace icons.

Example Unicode Class Name Glyph SVG
&#xe969; .adb-icon__comment_mobile SVG PNG
&#xe978; .adb-icon__widget_mobile SVG PNG
&#xe979; .adb-icon__dashboard_mobile SVG PNG
&#xe980; .adb-icon__folder_mobile SVG PNG