Sport Icon Set
ProCollection of sport-specific SVG icons covering ball types, field markings, equipment, player positions, and match event symbols. Follows the same sizing and stroke conventions as the core Lexicon icon system.
24 variants
Variants
| Variant | Description | When to use |
|---|---|---|
| Football | Icons for football/soccer: ball, goal, pitch, corner flag, whistle, VAR. | Use in football-specific interfaces and match event timelines. |
| Basketball | Icons for basketball: ball, hoop, court, three-pointer arc. | Use in basketball-specific interfaces. |
| Tennis | Icons for tennis: ball, racket, court, net. | Use in tennis-specific interfaces. |
| Rugby | Icons for rugby: ball, posts, scrum, lineout. | Use in rugby-specific interfaces. |
| Cricket | Icons for cricket: ball, bat, stumps, pitch. | Use in cricket-specific interfaces. |
| General | Cross-sport icons: trophy, medal, stopwatch, whistle, substitution arrows. | Use for sport-agnostic elements shared across all sports. |
Usage Guidelines
Do
Use consistent stroke weight (1.5px at 24px) matching core Lexicon icons.
Don't
Mix filled and stroked icons in the same context.
Do
Provide aria-label for meaningful icons.
Don't
Scale below 16px — legibility degrades.
Do
Use aria-hidden="true" for decorative icons.
Don't
Use icons without text labels in actionable contexts.
Code
Design Tokens
Accessibility
- Decorative icons use aria-hidden="true".
- Meaningful icons use role="img" with aria-label.
- Stroke width scales proportionally: 1.5px at 24px, 1.25px at 16px.
- Never use an icon as the sole indicator of meaning — pair with text.