UI Icons
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.
Bullets
Communication and Devices
Controls
Files
Link descriptors
Marketing
Navigation
Preference
Social
Status
Time and Event
Toggle
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
)- If using scarlet is an issue, choose a gray from Ohio State’s Primary Colors
- If an icon needs to reflect a status, such as success, warning or error messaging, choose the appropriate color from Ohio State’s Utility Colors
- 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
- Ohio State brand guidelines: Icons
- Icon guide for creating and sharing Ohio State icons (Requires Login)
- Accessibility of CSS generated content
- Icon Fonts: Harvard Digital Accessibility
- Icon Font Accessibility (Filament Group)