Nova distinguishes between two types of icons based on their purpose and usage context:
- UI Icons: Functional and integrated into core interface elements
-
Illustrative Icons: Expressive, narrative-driven, and used in larger visual moments
Both sets are designed with consistency in mind, but they differ in technical implementation and flexibility.
UI Icons
UI Icons are designed to be clear, compact, and versatile. They appear alongside text or on their own within core interface components such as buttons, toolbars, navigation, and forms.
Sizing
To maintain pixel-perfect clarity and ensure alignment between design and code, UI icons are available in a fixed set of five sizes:
|
Token |
Size |
|---|---|
|
xs |
12×12 px |
|
sm |
16×16 px |
|
md |
20×20 px |
|
lg |
24×24 px |
|
xl |
28×28 px |
These tokens are consistent across design and code, ensuring a reliable handoff.
In Figma
Each UI icon is a component with predefined size variants.
Designers should always use the predefined instances — not custom-resized icons — to ensure consistency with the system and to match coded components precisely.
In Code
All UI icons are accessible via the nv-icon component. Icons are rendered from an SVG sprite using the <use> tag, offering performance benefits like caching and reduced duplication (note: the sprite is not tree-shakeable).
Example usage:
<nv-icon size="lg" name="user"></nv-icon>
html
- name: Matches the icon name in Figma
-
size: One of xs, sm, md, lg, xl
Developers should refer to the Figma handoff file and Storybook for the full icon catalog and usage examples.
Color and Accessibility
Icon color and stroke are managed via the system’s color token rules and do not require manual overrides.
- Icons should be paired with text whenever possible
- If used alone, include aria-label attributes for screen reader support
Illustrative Icons
Illustrative Icons are larger, more expressive, and used to support storytelling, mood, or brand tone. They are best suited for visual moments such as onboarding, empty states, authentication flows, and content-rich pages.
Access and Use
Illustrative icons are not available as Figma or code components.
Instead, they are curated and distributed by the branding team via the Digital Asset Manager.
Designers can:
- Browse available assets
- Manually import selected SVGs into Figma
- Resize and compose them as needed based on the context
- Export finalized SVGs for developer handoff
Development
Developers embed or reference the provided SVGs directly in the page.
There is no shared component for illustrative icons, due to their variable nature and usage patterns.
Style Guidance
Formal guidelines for illustrative icons — including visual style, accessibility, and color usage — are currently in development.
Until these are finalized, please consult the branding team for best practices or usage review.