Icons

Usage

Icons are pictorial representations of objects. They help define the visual identity of SKY UX applications, and they provide a shorthand to visually convey meaning that users can understand at a glance. SKY UX uses glyphic, mono-color icons to facilitate, guide, and inform users.

Icons should not be used for solely decorative purposes.

How to select icons

To determine whether an icon is available for a new component, check the SKY UX icon dictionary below. Then make sure that your use case is consistent with how other components use the icon.

  • Do not use icons with established meanings for different purposes.
  • Be mindful of how icons are used in specific components such as grids, tiles, buttons, and modals.

Styling

Icons usually inherit their size and color from parent elements, particularly when you use them inline. If you use icons in a non-inline context and need a different size, FontAwesome provides size multiplier classes. Use the smallest size multiple that accomplishes your goals. To apply a different color to an icon, follow the color guidelines.

Dictionary

This dictionary provides a complete list of icons that are recommended for use in SKY UX. All the icons are from FontAwesome. We have found that if FontAwesome does not have a particular icon, it is probably not common enough for its purpose to be immediately obvious to users.

Usage

Add

Code
<i class="fa fa-plus-circle"></i>
Usage

Edit

Code
<i class="fa fa-pencil"></i>
Usage

Save

Code
<i class="fa fa-save"></i>
Usage

Open

Code
<i class="fa fa-folder-open-o"></i>
Usage

Delete

Code
<i class="fa fa-trash-o"></i>
Usage
  • Close
  • Cancel
Code
<i class="fa fa-close"></i>
Usage

Clear

Code
<i class="fa fa-times-circle"></i>
Usage

Expand

Code
<i class="fa fa-chevron-down"></i>
Usage

Collapse

Code
<i class="fa fa-chevron-up"></i>
Usage

Expand all

Code
<i class="fa fa-angle-double-down"></i>
Usage

Collapse all

Code
<i class="fa fa-angle-double-up"></i>
Usage

Help

Code
<i class="fa fa-question-circle"></i>
Usage
  • Settings
  • Setup
Code
<i class="fa fa-gear"></i>
Usage

Phone

Code
<i class="fa fa-phone"></i>
Usage

Email

Code
<i class="fa fa-envelope-o"></i>
Usage
  • Calendar
  • Date
Code
<i class="fa fa-calendar"></i>
Usage
  • Do not contact
  • Will not attend
Code
<i class="fa fa-ban"></i>
Usage
  • Inactive
  • Warning
Code
<i class="fa fa-warning"></i>
Usage
  • Conversation
  • Meeting
Code
<i class="fa fa-comments"></i>
Usage

Tag

Code
<i class="fa fa-tag"></i>
Usage

Search

Code
<i class="fa fa-search"></i>
Usage

Filter

Code
<i class="fa fa-filter"></i>
Usage
  • Attach
  • Attachment
Code
<i class="fa fa-paperclip"></i>
Usage

Credit card

Code
<i class="fa fa-credit-card"></i>
Usage

Selection (dropdown)

Code
<i class="fa fa-caret-down"></i>
Usage
  • Loading
  • Wait
Code
<i class="fa fa-spinner"></i>
Usage
  • Primary
  • Raiting
Code
<i class="fa fa-star"></i>
Usage

Next

Code
<i class="fa fa-caret-right"></i>
Usage

Previous

Code
<i class="fa fa-caret-left"></i>
Usage
  • Grid view
  • Table
Code
<i class="fa fa-table"></i>
Usage
  • Complete
  • Success
Code
<i class="fa fa-check"></i>
Usage
  • Image
  • Image file
Code
<i class="fa fa-file-image-o"></i>
Usage

Menu

Code
<i class="fa fa-ellipsis-h"></i>
Usage

Draggable

Code
<i class="fa fa-arrows"></i>
Usage

Thumbs up

Code
<i class="fa fa-thumbs-o-up"></i>
Usage

Thumbs down

Code
<i class="fa fa-thumbs-o-down"></i>
Usage

Sort ascending

Code
<i class="fa fa-caret-up"></i>
Usage

Sort descending

Code
<i class="fa fa-caret-down"></i>
Usage

Note

Code
<i class="fa fa-sticky-note-o"></i>
Usage

Zoom in

Code
<i class="fa fa-search-plus"></i>
Usage

Zoom out

Code
<i class="fa fa-search-minus"></i>
Usage

Print

Code
<i class="fa fa-print"></i>
Usage

Notification

Code
<i class="fa fa-bell-o"></i>
Usage

Card view

Code
<i class="fa fa-th-large"></i>
Usage

Map

Code
<i class="fa fa-map-marker"></i>
Usage
  • Cloud
  • Knowledgebase
Code
<i class="fa fa-cloud"></i>
Usage

Group

Code
<i class="fa fa-group"></i>
Usage

More information

Code
<i class="fa fa-info-circle"></i>
Usage
  • Attach
  • Upload
Code
<i class="fa fa-cloud-upload"></i>
Usage

Video file

Code
<i class="fa fa-file-video-o"></i>
Usage

PDF file

Code
<i class="fa fa-file-pdf-o"></i>
Usage

Microsoft Word file

Code
<i class="fa fa-file-word-o"></i>
Usage

Microsoft Excel file

Code
<i class="fa fa-file-excel-o"></i>
Usage

Generic file

Code
<i class="fa fa-file-o"></i>
Usage

Website

Code
<i class="fa fa-globe"></i>
Usage

Facebook profile

Code
<i class="fa fa-facebook"></i>
Usage

Twitter profile

Code
<i class="fa fa-twitter"></i>
Usage

LinkedIn profile

Code
<i class="fa fa-linkedin"></i>
Usage
  • Business
  • Organization
Code
<i class="fa fa-building-o"></i>
Usage

Contact information is in season

Code
<i class="fa fa-arrow-right"></i>