Skip to main content

Icons

Beta
Icons visually represent a simple concept, object or activity at first glance.

Using a consistent set of icons helps establish a familiar look and feel across a site or service, while using individual icons consistently establishes a reliable relationship between the icon and a specific concept or action. For example, don’t use an envelope icon to indicate email on one page and mailing address on another. Users should be able to trust that a certain icon always means the same thing, no matter where it’s used on your site. It’s important that icons always serve a single functional purpose throughout a site or service.

bars

.icon-bars\f00c
ban

.icon-ban\f017
bell

.icon-bell\f300
bell-fill

.icon-bell-fill\f301
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
dollar-sign-circle

.icon-dollar-sign-circle\f2fe
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

.icon-question\f315
question-circle

.icon-question-circle\f30f
question-fill

.icon-question-fill\f109
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

Usage#

Dos#

  • Use icons to add visual emphasis or interest, signal an action, or indicate a feedback state
  • Pair an icon with a text label or copy to ensure clarity, overcome ambiguity and improve accessibility
  • Use icons consistently to represent the same concept when appearing in multiple places in the same user interaction
  • Display UI icons at 24x24px, when possible
  • When possible, icons color should be scarlet (#ba0c2f) on a light background, with the exception icons for Social Media Links in the Site Footer, which are gray-dark-80 (#212325)
  • Align to BUX patterns by using the following icons paired with interactions:
    • Bars: use for a menu on a mobile device
    • Carets: use in a dropdown, such as a dropdown menu; or dropdown input field
    • Chevrons: use in user controls, such as previous/next buttons; a component that expand, such as an Accordion; or a call-to-action, such as a Text Link
    • Dots: use for utilities on a mobile device
    • Eye: use to represent “password”, such as in a password input field
    • Jump: use for a shortcut to take the user to either the top or bottom of a webpage
    • Search: reserved for a search input field

Don’ts#

  • Don’t modify the design of an icon
    • If you need an icon that is not shown, follow Brand Center icon standards and icon creation guide or contact Office of Marketing and Communications to have it created and/or approved for the icon library
  • Don’t depict icons in Ohio State’s accent colors. Only use Ohio State’s primary colors.
    • An exception to this rule is that icons displayed within Alerts or Utility Colors to indicate a status
  • Don’t rely on hover or click-to-reveal text labels

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>

Accessibility#

  • Make sure the color of the icon meets or exceeds a color contrast ratio of 4:5:1 to background elements
  • When using an icon within a call-to-action, such as a Button, the touch target needs to be 44px or larger to meet accessibility standards
  • Accessible Icons
  • Best Practices for accessible icons

References#