Nathaniel Burlot
Terug naar werk
ULK - Icon Library & Visual Language

Systemen

ULK - Icon Library & Visual Language

Actief

A custom icon system built for ULK, ensuring visual consistency, performance, and accessibility across every platform using the design system.

Domein
Icon system Visual language Design system
Gereedschap
Affinity Designer Nucleo Git SVG
Tijdlijn
Ontwikkeld vanaf 2022, regelmatig bijgewerkt via de ULK Git-repository. Documentatieverbetering verwacht in 2026.
A custom icon system built for ULK, ensuring visual consistency, performance, and accessibility across every platform using the design system.

Context

Designed to align with the communication department's print identity and iconography guidelines, while staying legible at small interface sizes: a balance between graphic clarity and institutional consistency.

Structure & logic

  • Each icon hand-drawn on a strict 16 × 16 px grid, with a defined visual grammar for stroke weight and minimum spacing
  • Icons organised into themed families (navigation, social, transport, symbols...)
  • Exported to SVG and webfont formats for flexible integration

Workflow & tools

  • Designed in Affinity Designer on shared artboards
  • Exported as clean SVGs, then imported into Nucleo for naming, prefixing (ulkicon-*), categorisation and bundling
  • Deployed as a dynamic SVG sprite and webfont via the ULK assets pipeline

Accessibility features

  • Monocolor, styled via CSS (color, size, opacity) without additional assets
  • Consistent legibility preserved across all scales
  • Clean integration with screen readers when paired with proper markup

Collaboration & status

Actively maintained, updated regularly via the ULK Git repo. Next goals: improved icon documentation, visual search by category. Deployment of improved docs expected 2026.

Library & workflow

  • Nucleo icon library view 1
  • Nucleo icon library view 2
  • Icon grid detail