Skip to main content

UI Icons

Ready
UI icons are used to guide actions within websites or apps, while standard icons are used to visually convey a concept.

Within Ohio State’s brand, there are two types of icons — standard and user interface (UI). While icons utilize a common design system, each type of icon has a specific use-case.

  • Standard icons are used to visually convey a concept.
    • Though standard icons are often used in infographics, PowerPoint presentations, diagrams and signs, they can be used in BUX components, such as on a Tile or CTA (Call-to-action) Collection.
  • UI icons are used to guide actions within websites or apps.
    • They can be used in Ohio State web or app design, including BUX components, to allow users to more quickly interact and intuitively navigate.
    • UI icons that are universal, not unit-specific, can be utilized directly from BUX and found below.

Learn more about brand icons, including usage guidelines and downloadable files.

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
grid-view

.icon-grid-view\f61e
jump-bottom

.icon-jump-bottom\f308
jump-top

.icon-jump-top\f309
list-view

.icon-list-view\f61c
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
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
play

.icon-play\f317
play-fill

.icon-play-fill\f319
pause-fill

.icon-pause-fill\f31a
printer

.icon-printer\f31b
shopping-cart

.icon-shopping-cart\f31c
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
volume-slash

.icon-volume-slash\f619
volume-high

.icon-volume-high\f61a
check

.icon-check\f101
check-circle

.icon-check-circle\f102
check-fill

.icon-check-fill\f018
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\f30f
question-fill

.icon-question-fill\f109
rss

.icon-rss\f201
share

.icon-share\f202
webcam

.icon-webcam\f01a
facebook

.icon-facebook\f203
flickr

.icon-flickr\f204
instagram

.icon-instagram\f205
linkedin

.icon-linkedin\f206
reddit

.icon-reddit\f207
threads

.icon-threads\f20d
tiktok

.icon-tiktok\f209
x

.icon-x\f20e
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 are utility colors to indicate a status
  • Don’t rely on hover or click-to-reveal text labels

Implementation Notes​

The icons shown on this page have CSS classes predefined in the BUX package. Adding an icon is as simple as adding a class to an html <span> element. Note: the predefined CSS icon classes are all defined with :before and you must apply the icon class to a <span>.

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

You can also reference BUX icons “manually” in your site-specific CSS. You are not required to apply the class to a <span> when you do it this way. 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";
}

Use cases​

Sometimes icons are used by themselves and sometimes they are used to enhance the meaning of a text label. Depending on how you are using an icon will change how it is correctly marked up for semantics and accessibility.

Link text with icon​

<a href="mailto:address@example.com"><span class="icon-envelope-fill"></span> address@example.com</a>

Button with text and icon​

<button class="bux-button bux-button--icon">
    <div class="bux-button__icon">
        <span class="icon icon-envelope" aria-hidden="true"></span>
    </div>
    Button with Icon
</button>

Button with icon only​

<button class="bux-button bux-button--icon">
  <span class="icon icon-search" aria-hidden="true"></span>
  <span class="visually-hidden">Submit search</span>
</button>

Accessibility​

  • Make sure the color of the icon meets or exceeds a color contrast ratio of 3: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
  • Icons must be universally understood if they are used without a visible text label. For example, the magnifying glass used for “Search”.
  • If the icon is decorative or if it is redundant to an accompanying text label, it should be hidden from screen readers to avoid a redundant or useless announcement. BUX icons will not normally be announced by a screen reader, but if you implement your own icons, you need to ensure that the redundant content is not read. Add aria-hidden="true" to the icon’s span. Example: <a href="mailto:address@example.com"><span class="icon-envelope-fill" aria-hidden="true"></span> address@example.com</a>
  • If the icon is used alone, it can either be decorative or meaningful. If it is meaningful, such as a magnifying glass indicating that a button is the “Search” button, there needs to be a text label provided for the screen reader using the BUX “screen-reader-only” CSS class visually-hidden. Example: <button><span class="icon-search></span><span class="visually-hidden">Search</span></button>

References​

Back to top