Icons

Icons provide visual cues that enhance user understanding and create intuitive interfaces. Our icon system ensures consistency, accessibility, and clarity across all Sport Wales digital platforms.

Icon Library

We use FontAwesome as our primary icon library, supplemented by custom Sport Wales icons where needed.

Home

fa-home

Search

fa-search

User

fa-user

Menu

fa-bars

Close

fa-times

Arrow

fa-arrow-right

Download

fa-download

Upload

fa-upload

Edit

fa-edit

Delete

fa-trash

Copy

fa-copy

Share

fa-share

Football

fa-futbol

Running

fa-running

Swimming

fa-swimmer

Fitness

fa-dumbbell

Medal

fa-medal

Trophy

fa-trophy

Calendar

fa-calendar

Email

fa-envelope

Phone

fa-phone

Location

fa-map-marker-alt

Info

fa-info-circle

Success

fa-check-circle

Icon Sizes

Consistent icon sizing maintains visual hierarchy and ensures icons remain legible across different contexts.

12px (text-xs) Small icons for inline text
14px (text-sm) Standard inline icons
16px (text-base) Button and form icons
18px (text-lg) Emphasized icons
20px (text-xl) Section icons
24px (text-2xl) Feature icons
30px (text-3xl) Large decorative icons
36px (text-4xl) Hero section icons

Icon Colors

Use consistent colors that align with our brand palette and provide adequate contrast.

Default

text-gray-700

Primary

SW Blue

Accent

SW Red

Success

text-green-600

Usage in Context

Buttons with Icons

Navigation with Icons

Form Fields with Icons

Icon Guidelines

✓ Do

  • • Use icons consistently across similar contexts
  • • Ensure icons are large enough (minimum 16px)
  • • Provide alternative text for screen readers
  • • Match icon style with overall design language
  • • Use familiar icons for common actions

✗ Don't

  • • Use too many different icon styles
  • • Make icons the primary means of communication
  • • Use complex icons at small sizes
  • • Rely solely on color to convey meaning
  • • Use icons that don't match user expectations