Skip to main content
UMDDesign System

Foundation

Icons

There are 2 styles of icons used on UMD websites: user interface (UI) icons and icon card component icons. This page concerns UI icons. UI icons serve as visual cues for interface elements. For more information on icon card component icons, see Icon Cards.

group of icons in a grid

General UI icons

Alert - exclamation point

Alert

Arrow facing back/left

Arrow - left

Long arrow

Arrow - long

Long, small arrow

Arrow - long

Arrow pointing to the right

Arrow - right

Calendar

Calendar

Calendar with plus sign

Calendar - add

Check

Check

Down facing chevron

Chevron - down

Chevron pointing left

Chevron - left

Chevron pointing to the right

Chevron - right

Chevron pointing up

Chevron - up

Clock

Clock

cancel, close symbol, "x"

Close

Document, PDF

Document

Download - arrow down to low bracket

Download

Square - copied

Duplicate

Filter lines

Filter

Filter funnel

Funnel

Indoors - building

Indoors

"i"

Information

Mail envelope

Mail

Map marker

Map

Minus/open state

Minus

New window - square with arrow sticking out

New Window

Trees to symbolize outdoors

Outdoors

Quote

Quote

Pause

Pause

Phone

Phone

Play - sideways triangle

Play

plus

Plus

Print

Print

Repeat arrows

Repeat

Section

Section

Search - magnifying glass

Search

Download all SVG icons

Social icons

Facebook

Facebook

Instagram

Instagram

Linked In

Linked In

X

X

YouTube

YouTube

Download all SVG icons

Accessibility

  • Use clear and unambiguous icons or symbols that are easy to see and enlarge.
  • Use common icons that the user is likely to understand.

  1. Color Contrast:

    Ensure a color contrast ratio of at least 3:1 between icons, borders, and background color to distinguish components from their background as stipulated in WCAG 1.4.11: Non-Text Contrast.
     

  2. Consistent Styling:

    Icons must be consistently styled to ensure all users can immediately recognize and understand them. The same icon should always be used to signify the same meaning. See WCAG 1.4.12: Text Spacing for guidance on consistency in visual presentation.
     

  3. Effective Alt Text for SVGs Used as Links:

    SVGs used as links should be hidden from assistive technologies, and effective alt text should be used on the link itself. Effective text describes what the link is and where it is taking the user. This is clear, descriptive text that conveys the link content succinctly and the purpose and destination of the link. Refer to WCAG 2.4.9: Link Purpose (Link Only).

    Example of effective link text: "Visit the Instagram page of the University of Maryland."
     

  4. Target Size:

    The target area of a clickable icon should be at least 24px wide by 24px high. This ensures that icons are easily clickable and accessible on touch screens. See WCAG 2.5.5: Target Size for more details.
     

  5. Ensure Scalability:

    SVGs are scalable without losing quality, making them ideal for responsive design. Ensure that your SVGs scale properly on different screen sizes and resolutions. Reference: WCAG 1.4.4: Resize Text (Indirectly related, as text within scalable SVGs should also be resizable without loss of content or functionality)

Guidelines

  • Icons are meant to feel familial. Whenever possible, shapes are derived from the Fearlessly Forward chevron in stroke weight and angles.
  • UI Icons should be filled, not lineal.
  • When icons are used together, such as in a row of social icons, icons should retain the same relative visual size. 
  • Adequate space should surround system icons if they are meant to be interactive (see accessibility, above). A minimum target size of 24px width and 24px height is recommended for use on mobile devices. Please note this refers to the target/click area and not the size of the icon itself.