Buckeye UX Icons

Implementation and Usage Instructions
  • Add the following stylesheet to the head of your document: https://assets.bux.osu.edu/bux-icons/bux-icons.css
  • 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 hexadecimal 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>
bars

.icon-bars "\f00c"
ban

.icon-ban "\f017"
bell

.icon-bell "\f300"
bell-fill

.icon-bell-fill "\f301"
buckeye-alert

.icon-buckeye-alert "\f623"
calendar

.icon-calendar "\f2ff"
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"
document

.icon-document "\f624"
document-excel

.icon-document-excel "\f625"
document-pdf

.icon-document-pdf "\f626"
document-word

.icon-document-word "\f627"
dollar-sign-circle

.icon-dollar-sign-circle "\f2fe"
donate

.icon-donate "\f622"
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"
expand

.icon-expand "\f62b"
collapse

.icon-collapse "\f62c"
external-link

.icon-external-link "\f116"
eye

.icon-eye "\f014"
eye-slash

.icon-eye-slash "\f100"
filter

.icon-filter "\f628"
home

.icon-home "\f304"
home-fill

.icon-home-fill "\f305"
graph-bar

.icon-graph-bar "\f306"
graph-pie

.icon-graph-pie "\f307"
grid-view

.icon-grid-view "\f61e"
jump-bottom

.icon-jump-bottom "\f308"
jump-top

.icon-jump-top "\f309"
link

.icon-link "\f016"
list-view

.icon-list-view "\f61c"
location-pin

.icon-location-pin "\f30a"
lock-fill

.icon-lock-fill "\f30b"
lock

.icon-lock "\f30c"
log-out

.icon-log-out "\f30d"
masonry-view

.icon-masonry-view "\f61d"
microphone

.icon-microphone "\f318"
parking

.icon-parking "\f61b"
pencil-in-square

.icon-pencil-in-square "\f618"
phone

.icon-phone "\f30e"
photo

.icon-photo "\f629"
play

.icon-play "\f317"
play-fill

.icon-play-fill "\f319"
pause-fill

.icon-pause-fill "\f31a"
printer

.icon-printer "\f31b"
shield

.icon-shield "\f62a"
shopping-cart

.icon-shopping-cart "\f31c"
sort

.icon-sort "\f00f"
search

.icon-search "\f012"
text-size

.icon-text-size "\f120"
thumbs-down

.icon-thumbs-down "\f310"
thumbs-up

.icon-thumbs-up "\f311"
user-circle

.icon-user-circle "\f312"
user

.icon-user "\f313"
upload

.icon-upload "\f314"
check-fill

.icon-check-fill "\f018"
webcam

.icon-webcam "\f01a"
volume-slash

.icon-volume-slash "\f619"
volume-high

.icon-volume-high "\f61a"
volunteer

.icon-volunteer "\f621"
check

.icon-check "\f101"
check-circle

.icon-check-circle "\f102"
heart

.icon-heart "\f61f"
star

.icon-star "\f620"
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

.icon-question "\f315"
question-circle

.icon-question-circle "\f316"
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"
threads

.icon-threads "\f20d"
tiktok

.icon-tiktok "\f209"
twitter

.icon-twitter "\f20a"
youtube

.icon-youtube "\f20b"
vimeo

.icon-vimeo "\f20c"
x

.icon-x "\f20e"
question-fill

.icon-question-fill "\f109"