Novus Technologies Novus Technologies design kit v0.9.0
Menu

Foundations

PrinciplesColorTypographySpacing & layoutAlignment & content fitActions & placementIconsLogosPhotographyDark modeAndroid foundationsiOS foundationsAsset index

Foundations

Icons

One line icon style for every Novus console: a 24-unit square grid, a 2-unit stroke with round caps and joins, no fill, drawn in the current text colour. The set is drawn in-house and ships as inline markup from admin-kits/shared/icons.mjs, so there is no icon font and no third-party request.

Sizes

Filters Transactions
16px beside small text, 20px in navigation and buttons, 24px standalone
<div class="row" style="align-items:center;gap:var(--space-5)">
  <span class="row" style="align-items:center;gap:var(--space-2)"><svg class="icon icon--sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 5h16l-6.2 7.4V18l-3.6 2v-7.6Z"/></svg><span style="font-size:var(--text-sm)">Filters</span></span>
  <span class="row" style="align-items:center;gap:var(--space-2)"><svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 8h15m-4-4 4 4-4 4"/><path d="M20 16H5m4-4-4 4 4 4"/></svg><span>Transactions</span></span>
  <svg class="icon icon--lg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="6" y="2.5" width="12" height="19" rx="2"/><path d="M9 6.5h6M9.5 11.5h.01M12 11.5h.01M14.5 11.5h.01M9.5 14.5h.01M12 14.5h.01M14.5 14.5h.01M9.5 18h5"/></svg>
</div>

In controls

Icon with a label, and an icon-only button with a name
<div class="row" style="align-items:center">
  <button class="btn btn--secondary btn--sm"><svg class="icon icon--sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 4v11m-4.5-4.5L12 15l4.5-4.5M5 19.5h14"/></svg> Export CSV</button>
  <button class="btn btn--ghost btn--sm toggle44" aria-label="Close"><svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 6 12 12M18 6 6 18"/></svg></button>
</div>

Rules

  • Draw on the 24-unit grid with a 2-unit stroke, round caps and joins, and no fill. Colour comes from currentColor, so icons follow text, accent, and dark mode on their own.
  • Use 16px (.icon--sm) beside small text, 20px (.icon) in navigation and buttons, and 24px (.icon--lg) standalone.
  • An icon supports a label; it rarely replaces one. Icon-only controls carry an accessible name and a 44px target.
  • Decorative icons carry aria-hidden="true"; the markup below already does.
  • One style per view: never mix these with filled, duotone, or third-party icons, and never use an icon font.
  • Product and platform identity uses the official pictographs from Logos, not this set.

The set

Each tile shows the icon at 16, 20, and 24px; Copy takes the 20px markup.

Menu menu
Close close
Chevron down chevron-down
Chevron up chevron-up
Chevron left chevron-left
Chevron right chevron-right
Search search
Filter filter
User user
Sign out sign-out
Light theme sun
Dark theme moon
Show eye
Hide eye-off
Dashboard dashboard
Analytics chart
Transactions transactions
Operations layers
Data grid grid
Terminal terminal
Settings settings
Workspace workspace
Add plus
Download download
Check check
More more