RRenDSv0.13.0
GitHubGet started

Primitive

Icons CSS-only

Conventions for SVG icons in RenDS. 16 / 20 / 24 px sizing, currentColor stroke, semantic alt or aria-hidden based on whether the icon carries meaning on its own.

About

Overview

RenDS doesn't ship an icon set. Bring your own (Lucide, Heroicons, Iconoir, custom) and follow the conventions below so they look consistent and stay accessible.

Live

Demo

<svg width="20" height="20" viewBox="0 0 24 24" fill="none"
     stroke="currentColor" stroke-width="2"
     aria-hidden="true">
  <path d="..."/>
</svg>

Reference

API

Sizing convention

Use caseSize
Inline with text (next to a label)16 px
Standard (buttons, menus, tabs)20 px
Large (empty states, headers)24 px

Color

Set stroke="currentColor" (or fill="currentColor" for filled icons) so the icon inherits the surrounding text color. Don't hardcode colors on icons.

Inclusive by default

Accessibility

  • Decorative icon next to text: add aria-hidden="true". The text already labels the action.
  • Icon-only button: the button needs aria-label="Action name". The icon stays aria-hidden.
  • Icon as the entire link/button identity (rare): the SVG can have role="img" aria-label="…".