ASSETS / REVA OUTLINE

SVG icons

36 monochrome icons built on a 24 × 24 grid with 1.75-unit rounded strokes. One icon class sets presentation; colour follows surrounding text and size follows its font. No theme or material attributes are needed on icons.

Download the SVG sprite. Each icon also has a standalone SVG download below.

Light, dark and glass

The same icon markup follows each parent theme. Opaque strokes keep their definition on frosted surfaces; buttons supply their own inherited foreground colour.

Light

Dark

Glass

HTMLSelect text to copy
<div class="grid">
<section class="card" data-theme="light" data-material="solid">
  <h3>Light</h3>
  <p class="row"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
  <use href="/RevaCSS/reva/icons/reva.svg#rv-sun"></use>
</svg><svg class="icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
  <use href="/RevaCSS/reva/icons/reva.svg#rv-moon"></use>
</svg><svg class="icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
  <use href="/RevaCSS/reva/icons/reva.svg#rv-bell"></use>
</svg><svg class="icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
  <use href="/RevaCSS/reva/icons/reva.svg#rv-heart"></use>
</svg></p>
  <button type="button"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
  <use href="/RevaCSS/reva/icons/reva.svg#rv-plus"></use>
</svg> Create project</button>
</section>
<section class="card" data-theme="dark" data-material="solid">
  <h3>Dark</h3>
  <p class="row"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
  <use href="/RevaCSS/reva/icons/reva.svg#rv-sun"></use>
</svg><svg class="icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
  <use href="/RevaCSS/reva/icons/reva.svg#rv-moon"></use>
</svg><svg class="icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
  <use href="/RevaCSS/reva/icons/reva.svg#rv-bell"></use>
</svg><svg class="icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
  <use href="/RevaCSS/reva/icons/reva.svg#rv-heart"></use>
</svg></p>
  <button type="button"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
  <use href="/RevaCSS/reva/icons/reva.svg#rv-plus"></use>
</svg> Create project</button>
</section>
<section class="card" data-theme="dark" data-material="glass">
  <h3>Glass</h3>
  <p class="row"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
  <use href="/RevaCSS/reva/icons/reva.svg#rv-sun"></use>
</svg><svg class="icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
  <use href="/RevaCSS/reva/icons/reva.svg#rv-moon"></use>
</svg><svg class="icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
  <use href="/RevaCSS/reva/icons/reva.svg#rv-bell"></use>
</svg><svg class="icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
  <use href="/RevaCSS/reva/icons/reva.svg#rv-heart"></use>
</svg></p>
  <button type="button"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
  <use href="/RevaCSS/reva/icons/reva.svg#rv-plus"></use>
</svg> Create project</button>
</section>
</div>

Usage

Load the normal core stylesheet, which includes icon styling, or load reva.icons.css for modular use. Host the sprite alongside your project and adjust its URL. The symbol names use the rv- prefix.

An icon beside a label

The visible button label names the action. The icon is decorative and adds no duplicate announcement.

HTMLSelect text to copy
<button type="button">
  <svg class="icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
  <use href="/RevaCSS/reva/icons/reva.svg#rv-download"></use>
</svg>
  Download report
</button>

Inline SVG, without a sprite

Inline vectors inherit colour as well. Copy the SVG body for projects that prefer individual inline assets.

Changes saved

HTMLSelect text to copy
<p><svg class="icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
  <path d="m5 12 4 4L19 6"/>
</svg> Changes saved</p>

Inline SVG and sprite use inherit currentColor. An SVG loaded through an img is a separate image and cannot inherit the parent text colour. Prefer inline SVG or sprite use for automatic theme colours. These icons add no glow, blur or animation.

Optional parent sizing

Icons follow the text by default. Set --re-icon-size on a parent for an explicit shared dimension; --re-icon-stroke adjusts stroke weight independently.

HTMLSelect text to copy
<div class="row" style="--re-icon-size: 2rem; --re-icon-stroke: 1.5;">
  <svg class="icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
  <use href="/RevaCSS/reva/icons/reva.svg#rv-home"></use>
</svg>
  <svg class="icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
  <use href="/RevaCSS/reva/icons/reva.svg#rv-mail"></use>
</svg>
  <svg class="icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
  <use href="/RevaCSS/reva/icons/reva.svg#rv-calendar"></use>
</svg>
</div>

Accessible names

Icons do not replace meaningful labels. Decorative icons use aria-hidden="true" and focusable="false". For a button without visible text, put its accessible name on the button. The SVG remains decorative and receives no separate focus.

A labelled icon-only control

This native button has a name and the existing button target size. The documentation action does not submit or mutate data.

HTMLSelect text to copy
<button type="button" aria-label="Search">
  <svg class="icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
  <use href="/RevaCSS/reva/icons/reva.svg#rv-search"></use>
</svg>
</button>

A meaningful standalone icon

When an icon conveys information without accompanying text, give the SVG image semantics and a name. Avoid colour as the only status signal.

HTMLSelect text to copy
<svg class="icon" viewBox="0 0 24 24" role="img" aria-label="Information" focusable="false">
  <use href="/RevaCSS/reva/icons/reva.svg#rv-info"></use>
</svg>