Icons

Reusable SVG icons (Tabler Icons and Devicons). Use stroke="currentColor" on the SVG and the icon class (or BEM like dropdown__icon) so Rizzo CSS sets color: var(--icon)—icons then match Astro/Svelte and stay visible on light and dark themes.

Add this component

The command below includes <strong>Icons</strong>—run it in your project directory to install this component (and the CSS if needed). No prompts.

Choose your package manager — click a tab to select, then copy the command.

npm pnpm yarn bun

Regular Icons (30) — Tabler Icons

These use currentColor; wrap in <span class="icon"> for theme color. Click any card to copy its SVG to the clipboard.

Devicons (22) — Colored Brand Icons

Brand colors; visible on all themes. Click any card to copy its SVG to the clipboard.

HTML (examples)

Copy the patterns below. Ensure Rizzo CSS is loaded.

<!-- Tabler-style: stroke="currentColor" + .icon class (Rizzo CSS) = theme-friendly on light/dark -->
<span class="icon" aria-hidden="true">
  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
    <circle cx="12" cy="12" r="3"/>
    <path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/>
  </svg>
</span>

<!-- Inline with button (inherits button color) -->
<button type="button" class="btn btn-primary">
  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
  <span>Next</span>
</button>

<!-- Or use BEM (e.g. dropdown__icon, navbar__settings-icon) which also use var(--icon) -->
<span class="dropdown__icon" aria-hidden="true">
  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">...</svg>
</span>

Other frameworks: Astro · Svelte · Vue · React

← Back to Vanilla components

Icons

Add this component

Regular Icons (30) — Tabler Icons

Gear

Close

ChevronDown

Copy

Check

Search

Moon

Palette

Owl

Snowflake

IceCream

Circle

Rainbow

Eye

Sort

Filter

Cmd

Cat

Flower

Flame

Leaf

Shield

Heart

Sun

Brush

Sunset

Zap

Cake

Lemon

Cherry

Devicons (22) — Colored Brand Icons

CSS3

Docker

Playwright

HTML5

JavaScript

Node.js

Astro

Plaintext

Git

Vue

React

Sass

Svelte

TypeScript

Python

Rust

Ruby

Bun

npm

pnpm

Yarn

Bash

HTML (examples)