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.

Font Awesome use

  • Font Awesome: v7 Pro (webfonts + CSS).
  • Default weight: Regular. Use a icon--solid modifier only when clarity requires it (very small icons, dense UI).
  • 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/link. Your button CSS already targets .btn-primary i / .btn-secondary i and preserves spacing/alignment.

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
Resources icon--toolbox Discription... LinkText
Utility icon--screwdriver-wrench Discription... LinkText
Service Desk icon--headset Discription... LinkText
Emergency icon--siren-on Discription... LinkText
Police icon--user-police Discription... LinkText
Get Help icon--hand Discription... LinkText
Accessibility icon--universal-access Discription... LinkText
Title IX icon--face-smile Discription... LinkText
folders icon--folders Discription... LinkText
folder icon--folder Discription... LinkText
Save / Bookmark icon--bookmark Discription... LinkText
Breadcrumb menu icon--folder-plus Discription... LinkText
Pin - Keep open icon--thumbtack Discription... LinkText
History icon--clock Discription... LinkText
Colleges and Schools icon--building-columns Discription... LinkText
Students icon--graduation-cap Discription... LinkText
Visitors & Community icon--building-user Discription... LinkText
Employees icon--id-badge Discription... LinkText
Content Hub icon--newspaper Discription... LinkText
About icon--circle-info Discription... LinkText
School level icon--building-flag Discription... LinkText
arrow-pointer icon--arrow-pointer Discription... LinkText
box icon--box Discription... LinkText
swatchbook icon--swatchbook Discription... LinkText
text icon--text Discription... LinkText
certificate icon--certificate Discription... LinkText
images icon--images Discription... LinkText
circle-half-stroke icon--circle-half-stroke Discription... LinkText
truck-fast icon--truck-fast Discription... LinkText
code-compare icon--code-compare Discription... LinkText
rectangle-vertical-history icon--rectangle-vertical-history Discription... LinkText
hammer-crash icon--hammer-crash Discription... LinkText
distribute-spacing-horizontal icon--distribute-spacing-horizontal Discription... 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".

Default icon weight is regular.

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!