To maintain a cohesive look and feel across your site, we have curated a set of icons for use where visual accents can enhance readability and engagement. Below, you’ll find an overview of the available icons, with additional options being added over time.
These icons are also available inside the Quick Links Tab Widget and Card Widget.
Usage
To display an icon, add the umc-icon class to a <div> element. To display your chosen icon, you need to add the data-icon attribute to your element with the appended name of the icon you want to show. The names of each icon can be found below.
<div class="umc-icon" data-icon="brainstorm"></div>To adjust the icon's height, include the inline style attribute with the desired value using style="height: [value];" directly on the element.
<div class="umc-icon" data-icon="credit-card" style="height: 200px;"></div>Icon Colors
Most icons are available in three styles—white, black, and duotone (black and red).
The default color of each icon is set to duotone. If you want to change the icon to be a different color, add the class white or black to the respective element.
Note: The icons categorized under “Brands” are only available in white and black. You will need to add either class for the icon to appear.
<div class="umc-icon white" data-icon="earth"></div>Best Practices for Icon Usage
To ensure a polished, accessible, and professional appearance, consider these guidelines when using icons:
- Keep it simple: Use icons sparingly to avoid visual clutter.
- Ensure relevance: Choose icons that clearly represent the action or content they accompany. Icons are meant to transcend language barriers. If an icon is unclear, it loses its purpose and can lead to confusion or misinterpretations. Ambiguity creates multiple possible meanings, defeating the goal of quick comprehension, hence using icons only when necessary is crucial for better user experience.
- Maintain consistency: Stick to the predefined sizes and colors for a uniform look across your site.
Accessibility Guidelines
Icons should enhance the user experience without creating barriers. Follow these best practices for accessibility:
- Pair icons with text: Icons alone may not be clear to all users. Ensure they are accompanied by descriptive labels when necessary.
- Use sufficient contrast: When placing icons on colored backgrounds, ensure strong color contrast for readability.
- Avoid relying on color alone: Users with color blindness may not perceive differences in icon color. When color is used to indicate meaning, provide additional visual cues, such as labels or tooltips.
- Remember screen reader support: If an icon conveys essential information (rather than being decorative), use appropriate alt text or ARIA labels to ensure it is conveyed to screen readers.
Library
Here is the current list of all available icons.
Technology and Tools
Education and Learning
Safety and Emergency
Communication and Access
Collaboration and Strategy
Finance and Funding
Goals and Achievement
Navigation and Logistics
Events and Media
Brands
this is a popup!