Skip to main content

Icons

Component status:Beta
BUX icon set
bars

.icon-bars\f00c
ban

.icon-ban\f017
bell

.icon-bell\f300
bell-fill

.icon-bell-fill\f301
caret-down

.icon-caret-down\f010
caret-up

.icon-caret-up\f011
caret-left

.icon-caret-left\f110
caret-right

.icon-caret-right\f111
chevron-left

.icon-chevron-left\f004
chevron-right

.icon-chevron-right\f005
chevron-up

.icon-chevron-up\f006
chevron-down

.icon-chevron-down\f007
chevron-dbl-left

.icon-chevron-dbl-left\f008
chevron-dbl-right

.icon-chevron-dbl-right\f009
chevron-dbl-up

.icon-chevron-dbl-up\f00a
chevron-dbl-down

.icon-chevron-dbl-down\f00b
clock

.icon-clock\f302
clock-rotate-right

.icon-clock-rotate-right\f303
circle

.icon-circle\f001
circle-alt

.icon-circle-alt\f002
dash

.icon-dash\f003
dots-h

.icon-dots-h\f00d
dots-v

.icon-dots-v\f00e
download

.icon-download\f015
envelope

.icon-envelope\f013
envelope-fill

.icon-envelope-fill\f019
external-link

.icon-external-link\f116
eye

.icon-eye\f014
eye-slash

.icon-eye-slash\f100
home

.icon-home\f304
home-fill

.icon-home-fill\f305
graph-bar

.icon-graph-bar\f306
graph-pie

.icon-graph-pie\f307
jump-bottom

.icon-jump-bottom\f308
jump-top

.icon-jump-top\f309
link

.icon-link\f316
location-pin

.icon-location-pin\f30a
lock

.icon-lock\f30c
lock-fill

.icon-lock-fill\f30b
log-out

.icon-log-out\f30d
phone

.icon-phone\f30e
sort

.icon-sort\f30f
search

.icon-search\f012
text-size

.icon-text-size\f120
thumbs-down

.icon-thumbs-down\f310
thumbs-up

.icon-thumbs-up\f311
user

.icon-user\f313
user-circle

.icon-user-circle\f312
upload

.icon-upload\f314
check

.icon-check\f101
check-circle

.icon-check-circle\f102
check-fill

.icon-check-fill\f018
info

.icon-info\f103
info-circle

.icon-info-circle\f104
info-fill

.icon-info-fill\f10c
xmark

.icon-xmark\f105
xmark-circle

.icon-xmark-circle\f106
xmark-fill

.icon-xmark-fill\f10d
exclamation

.icon-exclamation\f107
exclamation-circle

.icon-exclamation-circle\f108
exclamation-fill

.icon-exclamation-fill\f10b
question-circle

.icon-question-circle\f30f
rss

.icon-rss\f201
share

.icon-share\f202
facebook

.icon-facebook\f203
flickr

.icon-flickr\f204
instagram

.icon-instagram\f205
linkedin

.icon-linkedin\f206
reddit

.icon-reddit\f207
snapchat

.icon-snapchat\f208
tiktok

.icon-tiktok\f209
twitter

.icon-twitter\f20a
youtube

.icon-youtube\f20b
vimeo

.icon-vimeo\f20c

Implementation Notes#

To use via the css content property on a before or after selector, set the font-family to bux-icons and reference the character's hexidecimal value. For example:

 .some-class::before {
font-family: bux-icons;
content: "\f001";
}

To use as an html element use the following structure: <i class="icon icon-chevron-left"></i>