Icons

Icons are used to provide context and improve scanability.

Usage

To use an external SVG, you must use the SVG 4 Everybody shim. Otherwise, the sprite must be included on the page. This example uses an external file.

Icons are to be used as accessible foreground images. The text underneath each icon corresponds to the [ICON_ID] in the snippet below.

If using Jekyll with the gem you can use icons like this:


<svg aria-hidden="true" class="sba-c-icon">
  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="{{ site.baseurl }}/assets/svg-sprite/sprite.svg#[ICON_ID]"></use>
</svg>

If using Ruby on Rails with the gem you can use icons like this:


<svg aria-hidden="true" class="sba-c-icon">
  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href=<%= "#{image_path('svg-sprite/sprite.svg')}#[ICON_ID]"%> ></use>
</svg>

Included Icons

Change icon color
Modifier class:

address-card

angle-double-down

angle-double-left

angle-double-right

angle-double-up

angle-down

angle-left

angle-right

angle-up

archive

arrow-alt-circle-down

arrow-alt-circle-left

arrow-alt-circle-right

arrow-alt-circle-up

arrow-circle-down

arrow-circle-left

arrow-circle-right

arrow-circle-up

arrow-down

arrow-from-bottom

arrow-from-left

arrow-from-right

arrow-from-top

arrow-left

arrow-right

arrow-square-down

arrow-square-left

arrow-square-right

arrow-square-up

arrow-to-bottom

arrow-to-left

arrow-to-right

arrow-to-top

arrow-up

backward

ban

bars

bell

bell-slash

bolt

bullhorn

calculator

calendar

calendar-alt

caret-down

caret-left

caret-right

caret-square-down

caret-square-left

caret-square-right

caret-square-up

caret-up

check

check-circle

check-square

chevron-circle-down

chevron-circle-left

chevron-circle-right

chevron-circle-up

clock

cog

comment

comments

dollar-sign

download

edit

ellipsis-h

ellipsis-v

envelope

envelope-open

exclamation

exclamation-circle

exclamation-triangle

external-link

external-link-square

fast-backward

fast-forward

file

file-alt

file-archive

file-pdf

file-word

filter

flag

forward

heart

id-card

inbox

info

info-circle

life-ring

lightbulb

list

lock

lock-open

long-arrow-alt-down

long-arrow-alt-left

long-arrow-alt-right

long-arrow-alt-up

minus

minus-circle

percent

phone

plus

plus-circle

plus-square

print

question

question-circle

redo

save

search

sign-in

sign-out

sort

sort-alpha-down

sort-alpha-up

sort-amount-down

sort-amount-up

sort-down

sort-numeric-down

sort-numeric-up

sort-up

spinner

star

step-backward

step-forward

sync

tag

tags

times

times-circle

trash

upload

user

user-circle

user-plus

user-times

users