Icons

Action phrases + icon mapping




Rules + accessibility

Icons never replace text

Icons reinforce meaning. Buttons, links, and controls must still make sense if the icon is removed. In this guide, most icons are decorative and are hidden from assistive tech using aria-hidden="true".

How icons work in this system

  • Token classes define meaning: Use semantic icon tokens (for example, icon--download) instead of library-specific icon classes.
  • Swap-friendly by design: If the icon library changes or is updated, only the CSS token-to-glyph mapping needs to change. All updates apply globally without touching markup.
  • Stable markup and layout: Keep <i class="icon icon--…"> in the HTML so existing button structure, spacing, and flex behavior remain unchanged.
  • CSS file reference: The icon token mappings and base icon rules are defined in css/utilities/wg-utilities-icons.css.

Font Awesome use

  • Font Awesome: v7 Pro (webfonts + CSS).
  • Default weight in the current CSS: solid / bold style (--fa-weight: 900 fallback).
  • Optional weight modifiers: use icon--regular for regular and icon--solid for solid when needed.
  • Consistency: one concept = one token across the entire site (don’t swap tokens for the same action).
  • Placement: in CTAs, icons typically come after the label to keep labels aligned and scan-friendly.
  • Icon-only controls: allowed only when the control has an accessible name (label text, aria-label, or visually-hidden text).

ARIA + WCAG guidance (quick reference)

Scenario Do Don’t Example
Decorative icon next to text Hide the icon from assistive tech. Don’t add aria-label to the icon. <i class="icon icon--download" aria-hidden="true"></i>
Icon-only button Give the button an accessible name. Don’t rely on the icon to convey meaning. <button aria-label="Close"><i class="icon icon--xmark" aria-hidden="true"></i></button>
External link indicator Keep the visible label clear; optionally add non-visual context. Don’t announce the icon name. <span class="sr-only">(opens in new tab)</span>
Status / alerts Use proper semantics (role) for message containers. Don’t use only color or only an icon. <div role="alert">...</div>
Form validation Associate errors with the field and use aria-describedby. Don’t use icon-only error indicators. aria-describedby="email-error"

Implementation (CSS token system)

Standard markup

Use an <i> element with the base icon class plus a token class. Most icons are decorative and should include aria-hidden="true".

Recommended pattern

<i class="icon icon--download" aria-hidden="true"></i>

Buttons with icons (layout-safe)

Keep the icon as the last child inside the button or link. This keeps spacing and alignment consistent with the existing button patterns used across the system.

Pattern Example Notes
Text + decorative icon <a class="btn-secondary btn-sm">Download (PDF) <i class="icon icon--file-pdf" aria-hidden="true"></i></a> Preferred. Icon is purely visual reinforcement.
Icon-only control <button class="btn-secondary btn-sm" aria-label="Close"><i class="icon icon--xmark" aria-hidden="true"></i></button> Only when the control is recognizable and labeled accessibly.

Category: new unorganized

Action Phrase Icon Token Description Button Sample
Utility icon--circle Basic circular marker or utility indicator. LinkText
Resources icon--toolbox General resources, tools, or support materials. LinkText
Utility icon--screwdriver-wrench Setup, repair, maintenance, or tools. LinkText
Service Desk icon--headset Help desk, live support, or service support. LinkText
Emergency icon--siren-on Emergency alerts, urgent notices, or campus safety messaging. LinkText
Police icon--user-police Police, security, or campus public safety. LinkText
Get Help icon--hand Support, assistance, or help entry points. LinkText
Accessibility icon--universal-access Accessibility services, accommodations, or inclusive access information. LinkText
Title IX icon--face-smile Use only if this icon is the approved choice for that area’s content context. LinkText
folders icon--folders Multiple folders, grouped content, or organized collections. LinkText
folder icon--folder Single folder, grouped content, or a content section. LinkText
Save / Bookmark icon--bookmark Saved items, bookmarks, or keep for later. LinkText
Breadcrumb menu icon--folder-plus Expanded folder structure or add-to-folder style organization. LinkText
Pin - Keep open icon--thumbtack Pinning, keeping visible, or saving a position. LinkText
History icon--clock Recent history, time-based info, or hours. LinkText
Colleges and Schools icon--building-columns Academic colleges, schools, or formal institutional units. LinkText
Students icon--graduation-cap Students, academics, or graduation-related topics. LinkText
Visitors & Community icon--building-user Community-facing destinations, visitors, or public engagement. LinkText
Employees icon--id-badge Employee-facing content, staff resources, or internal people roles. LinkText
Content Hub icon--newspaper News, stories, updates, or editorial content hubs. LinkText
About icon--circle-info About pages, informational context, or explanatory content. LinkText
School level icon--building-flag School-level or institutional unit identity. LinkText
arrow-pointer icon--arrow-pointer Pointer or interactive emphasis icon. LinkText
box icon--box Package, item, or contained content. LinkText
swatchbook icon--swatchbook Style, design, palette, or theme content. LinkText
text icon--text Text settings, copy, or written content. LinkText
certificate icon--certificate Credentials, certification, or official recognition. LinkText
images icon--images Image galleries, photos, or visual media collections. LinkText
circle-half-stroke icon--circle-half-stroke Theme mode, contrast, or appearance settings. LinkText
truck-fast icon--truck-fast Fast delivery, speed, or expedited service. LinkText
code-compare icon--code-compare Compare code, versions, or development-related content. LinkText
rectangle-vertical-history icon--rectangle-vertical-history Browsing, content streams, or vertical history views. LinkText
hammer-crash icon--hammer-crash Construction, impact, or major maintenance messaging. LinkText
distribute-spacing-horizontal icon--distribute-spacing-horizontal Spacing, layout distribution, or alignment controls. LinkText

Category: Approved action phrases (primary CTA language)

Choose the action phrase based on intent and pair it with a specific target object when required. “Apply Now” is reserved for the global university-wide admissions CTA. Icons reinforce meaning but never replace text. Decorative icons use aria-hidden="true".

The current icon CSS defaults to a solid icon weight unless a modifier changes it.

Action Phrase Icon Token Description Button Sample
Apply Now icon--pen-to-square Global, university-wide admissions CTA (primary “Apply” entry point). Apply Now
Apply to icon--pen-to-square Apply to a specific program, school, or department (object required). Apply to Business Program
Apply for icon--pen-to-square Apply for a benefit, resource, or opportunity (object required). Apply for Scholarships
Register for icon--calendar-check Register for events, sessions, tours, orientations, or classes (object required). Register for Orientation
Schedule icon--calendar Book an appointment or meeting (object required). Schedule Advising Appointment
Request icon--clipboard Request a service, form, transcript, or support (object required). Request Transcript
Sign in to icon--user-lock Authenticated destinations (portals, apply systems, tools); object required. Sign in to Student Portal
Submit icon--paper-plane Finalize and send user input (forms, requests, feedback); object encouraged. Submit Application
Learn more about icon--circle-info Supplemental info (not primary navigation); always include the object. Learn more about Financial Aid
Explore icon--compass High-level discovery of options (broad overviews; object required). Explore Colleges & Schools
Browse icon--rectangle-vertical-history Browse a collection/category (lists of items; object required). Browse Undergraduate Programs
View icon--eye View a defined set of results or detailed content list (object required). View Academic Programs
Find or Search icon--magnifying-glass Search or discovery action to locate something specific (object encouraged). Find a Program
Go to icon--arrow-right Utility navigation to a specific page or section (usually internal). Go to College of Engineering
Visit icon--arrow-up-right-from-square External destination / leaving the current context (use for off-site links). Visit Campus Map
Download icon--download Download a file; include file type when known (PDF, DOCX, etc.). Download Course Syllabus (PDF)
Contact icon--envelope General contact CTA (email-first intent). Use “Contact” with a target when possible. Contact Advising
Call icon--phone Phone-first contact action. Use for clickable phone links on mobile (tel:). Call Admissions
Chat with icon--comments Live chat / messaging with a service team. Use only when real-time chat is available. Chat with Support
Pay icon--credit-card Payments and fees. Use only for actual payment destinations (not “cost info”). Pay Tuition & Fees
Donate icon--heart Fundraising / giving. Keep label explicit (avoid vague “Support us”). Donate
Restriction

Do not use “Learn more” by itself. Always include the object (e.g., “Learn more about Financial Aid”).

Review Icon and button use guide

Category: Download icons (file-type clarity)

Prefer a file-type icon when the format is known. Always include the file type in the label when possible.

Action Phrase Icon Token Description Button Sample
Download icon--download Generic download (use when file type is unknown). Download File
Download icon--file-pdf PDF downloads (policies, forms, guides). Include “(PDF)” in the label. Download UVU Style Guide (PDF)
Download icon--file-word Word documents (editable forms). Include “(DOCX)”. Download Form Template (DOCX)
Download icon--file-excel Spreadsheets (XLSX/CSV). Include file type. Download Data Table (XLSX)
Download icon--file-zipper ZIP bundles. Include “(ZIP)”. Download Assets (ZIP)

Category: Navigation, Function (UI controls + component behavior)

Use these for moving between pages/sections and for global navigation controls.

Action Phrase Icon Token Description
Go to icon--arrow-right Internal navigation to a specific destination.
Back to icon--arrow-left Backward navigation (breadcrumbs, “Back to results”, prior step).
Visit icon--arrow-up-right-from-square External link indicator (off-site).
?: icon--arrow-up-right External to current department, school, area. With-in uvu.edu.
Expand icon--chevron-down Accordion expand. Use aria-expanded + aria-controls on trigger.
Collapse icon--chevron-up Accordion collapse state (often rotate one icon via CSS instead of swapping).
Next pannel icon--chevron-right Open sub menu panel
Back, Previous pannel icon--chevron-left Open previous sub menu panel
Drop Down Open icon--caret-down Open drop down menu
Drop Down Close icon--caret-up Close drop down menu
Close icon--xmark Close modal/panel/menu. Icon-only requires aria-label="Close".
Filter icon--filter Filter panels and filter actions. Label should specify what is filtered when possible.
Sort icon--arrow-up-wide-short
icon--arrow-down-wide-short		 Sorting controls. Prefer a labeled select or button group for clarity.
Open menu icon--bars Navigation menu toggle (icon-only requires aria-label).
Search icon--magnifying-glass Search entry points (site, directory, program search).
Home icon--house Home link. Use in nav utilities, not as a substitute for a clear “Home” label.

Category: Action icons (content + utility actions)

Use these for common tasks that act on content or settings.

Action Phrase Icon Token Description
Save icon--floppy-disk Save changes (forms, settings). Use only when changes persist.
Edit icon--file-pen Edit content/settings. Reserve for edit meaning in admin/editor contexts.
Share icon--share-from-square Share a page/resource (copy link, email, social).
Print icon--print Print view / print action.
Settings icon--gear Settings/preferences. Use for configuration, not “tools”.

Category: Contact icons

Use these for people-first and service-first contact pathways.

Action Phrase Icon Token Description
Email icon--envelope Email contact. Prefer a real email link (mailto:) when appropriate.
Call icon--phone Phone contact. Use tel: links for mobile; show the number as text.
Location icon--location-dot Maps/directions and addresses (pair with address text).
Hours icon--clock Service hours (pair with hours text).
Help icon--circle-question Help/FAQ/support entry points.

Category: Social icons (brands)

Use brand tokens for social icons. Provide visible text or an accessible name for icon-only links.

Action Phrase Icon Token Description
YouTube icon--brand-youtube Video channel link. Use consistent icon choice across templates.
Instagram icon--brand-instagram Instagram profile link.
LinkedIn icon--brand-linkedin LinkedIn page link. Avoid switching between similar LinkedIn icons.
Facebook icon--brand-facebook-f Facebook page link.
X icon--brand-x-twitter X (Twitter) profile link.

Category: Alert + status icons

Use for callouts, alerts, and system messages. Pair with clear text; don’t rely on icon/color alone.

Action Phrase Icon Token Description
Info icon--circle-info Informational messaging. Use role="status" when it should be announced politely.
Success icon--circle-check Success confirmation. Pair with text stating what succeeded.
Warning icon--triangle-exclamation Caution/warnings. Keep copy specific and actionable.
Error icon--circle-xmark Error states. Use role="alert" for urgent messages that require action.
Important icon--bell Time-sensitive announcements (closures, deadlines). Use sparingly.
Icon Ops:

Web Apps: Link the Font Awesome CSS + webfonts (self-host) for CSS-only rendering.

Flutter: Use the font_awesome_flutter package.

iOS/Android Native: Embed Font Awesome TTF/OTF files and reference them as custom fonts.

Dark Mode - needs work

It seems that you have reduce motion enabled!