Icons

The design system provides icons through two mechanisms:

Sprite icons — SVG symbols referenced via <use> elements. These require you to include the sprite file in your page (importing the CSS and JS alone is not enough).
Icon classes — CSS classes that apply icons as background images. These work as soon as you import the design system CSS — no additional setup needed.

Sprite Icons

The sprite file is available at dist/svg/sprite.symbol.svg in the design system package (importable as @uga-online/design-system/dist/svg/sprite.symbol.svg). To use these icons, inline the sprite’s SVG markup in your page (typically in the document body with display: none). Once the sprite is present, reference individual icons via <use> elements.

Icon ID	Description
`#icon-arrow-down`	Downward-pointing chevron
`#icon-arrow-up`	Upward-pointing chevron
`#icon-arrow-left`	Left-pointing chevron
`#icon-arrow-right`	Right-pointing chevron

Examples

arrow-down

arrow-up

arrow-left

arrow-right

<div style="display: flex; gap: 2rem; align-items: center; flex-wrap: wrap">
  <div
    style="
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.5rem;
    "
  >
    <svg style="width: 2rem; height: 2rem" aria-hidden="true">
      <use href="#icon-arrow-down"></use>
    </svg>
    <span style="font-size: 0.75rem">arrow-down</span>
  </div>
  <div
    style="
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.5rem;
    "
  >
    <svg style="width: 2rem; height: 2rem" aria-hidden="true">
      <use href="#icon-arrow-up"></use>
    </svg>
    <span style="font-size: 0.75rem">arrow-up</span>
  </div>
  <div
    style="
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.5rem;
    "
  >
    <svg style="width: 2rem; height: 2rem" aria-hidden="true">
      <use href="#icon-arrow-left"></use>
    </svg>
    <span style="font-size: 0.75rem">arrow-left</span>
  </div>
  <div
    style="
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.5rem;
    "
  >
    <svg style="width: 2rem; height: 2rem" aria-hidden="true">
      <use href="#icon-arrow-right"></use>
    </svg>
    <span style="font-size: 0.75rem">arrow-right</span>
  </div>
</div>

Usage

Reference a sprite icon using an SVG <use> element:

<svg class="cmp-button__icon" aria-hidden="true">
  <use href="#icon-arrow-right"></use>
</svg>

Size the icon with CSS on the <svg> element (e.g., width and height). The arrows use currentColor for their stroke, so they inherit the text color of their parent.

Small (1rem)

Medium (1.5rem)

Large (2.5rem)

<div style="display: flex; gap: 2rem; align-items: center">
  <div
    style="display: flex; align-items: center; gap: 0.25rem; font-size: 1rem"
  >
    <svg style="width: 1rem; height: 1rem" aria-hidden="true">
      <use href="#icon-arrow-right"></use>
    </svg>
    <span>Small (1rem)</span>
  </div>
  <div
    style="display: flex; align-items: center; gap: 0.25rem; font-size: 1rem"
  >
    <svg style="width: 1.5rem; height: 1.5rem" aria-hidden="true">
      <use href="#icon-arrow-right"></use>
    </svg>
    <span>Medium (1.5rem)</span>
  </div>
  <div
    style="display: flex; align-items: center; gap: 0.25rem; font-size: 1rem"
  >
    <svg style="width: 2.5rem; height: 2.5rem" aria-hidden="true">
      <use href="#icon-arrow-right"></use>
    </svg>
    <span>Large (2.5rem)</span>
  </div>
</div>

Color Inheritance

Because the sprite icons use currentColor, changing the parent’s text color also changes the icon color.

Red Lake Herrick Olympic

<div style="display: flex; gap: 2rem; align-items: center">
  <span
    class="util-color-red"
    style="display: flex; align-items: center; gap: 0.25rem"
  >
    <svg style="width: 1.5rem; height: 1.5rem" aria-hidden="true">
      <use href="#icon-arrow-right"></use>
    </svg>
    Red
  </span>
  <span
    class="util-color-lake"
    style="display: flex; align-items: center; gap: 0.25rem"
  >
    <svg style="width: 1.5rem; height: 1.5rem" aria-hidden="true">
      <use href="#icon-arrow-right"></use>
    </svg>
    Lake Herrick
  </span>
  <span
    class="util-color-olympic"
    style="display: flex; align-items: center; gap: 0.25rem"
  >
    <svg style="width: 1.5rem; height: 1.5rem" aria-hidden="true">
      <use href="#icon-arrow-right"></use>
    </svg>
    Olympic
  </span>
</div>

Icon Classes

These CSS classes apply icons as background images and work automatically when you import the design system CSS. They are primarily used by interactive components (e.g., search toggle, subnav toggle) where the icon is swapped dynamically via JavaScript data-icon-* attributes. The icons render in white, so they are designed for use on dark backgrounds.

Class	Description
`.icon-search`	Search magnifying glass
`.icon-shield`	UGA shield icon
`.icon-up-arrow`	Up arrow chevron
`.icon-down-arrow`	Down arrow chevron

Examples

The icon classes set background-image and background-repeat but not background-size or dimensions, so you must provide those yourself. The icons are white and intended for dark backgrounds.

icon-search

icon-shield

icon-up-arrow

icon-down-arrow

<div style="display: flex; gap: 2rem; align-items: center; flex-wrap: wrap">
  <div
    style="
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.5rem;
    "
  >
    <div
      class="icon-search util-background-black"
      style="
        width: 2.5rem;
        height: 2.5rem;
        background-size: contain;
        border-radius: 0.25rem;
      "
    ></div>
    <span style="font-size: 0.75rem">icon-search</span>
  </div>
  <div
    style="
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.5rem;
    "
  >
    <div
      class="icon-shield"
      style="
        width: 1.75rem;
        height: 2.5rem;
        background-size: contain;
        background-position: center;
      "
    ></div>
    <span style="font-size: 0.75rem">icon-shield</span>
  </div>
  <div
    style="
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.5rem;
    "
  >
    <div
      class="icon-up-arrow util-background-black"
      style="
        width: 2.5rem;
        height: 2.5rem;
        background-size: 60%;
        background-position: center;
        border-radius: 0.25rem;
      "
    ></div>
    <span style="font-size: 0.75rem">icon-up-arrow</span>
  </div>
  <div
    style="
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.5rem;
    "
  >
    <div
      class="icon-down-arrow util-background-black"
      style="
        width: 2.5rem;
        height: 2.5rem;
        background-size: 60%;
        background-position: center;
        border-radius: 0.25rem;
      "
    ></div>
    <span style="font-size: 0.75rem">icon-down-arrow</span>
  </div>
</div>

Accessibility

Decorative icons (icons that accompany visible text) should use aria-hidden="true" on the <svg> element so screen readers skip them.
Meaningful icons (icons that are the only content in a control, such as an icon-only button) need an accessible name. Provide one via aria-label on the parent element or a visually hidden <span> with descriptive text.
Sprite icons use <svg> elements, which are inherently silent to screen readers when aria-hidden="true" is applied. Never omit this attribute on decorative icons.
Icon classes (.icon-search, .icon-shield, etc.) render as CSS background images, which are invisible to assistive technology. Always pair them with visible or visually hidden text to convey meaning.