Documentation

Installation

npm install stera-icons

Quick Start

import { SiHeart, SiHeartFill, SiHeartDuotone } from "stera-icons";

export function App() {
  return (
    <div>
      <SiHeart className="h-6 w-6" />
      <SiHeartFill className="h-8 w-8 text-red-500" />
      <SiHeartDuotone className="h-10 w-10" />
    </div>
  );
}

Variants

Every icon comes in 6 variants across 3 weights and 2 styles:

Variant	Suffix	Example
Regular	(none)	SiHeart
Regular Duotone	Duotone	SiHeartDuotone
Bold	Bold	SiHeartBold
Bold Duotone	BoldDuotone	SiHeartBoldDuotone
Fill	Fill	SiHeartFill
Fill Duotone	FillDuotone	SiHeartFillDuotone

Props

Prop	Type	Default	Description
className	string	—	CSS class names applied to the SVG
size	number \| string	—	Width and height of the SVG. Omit to size with CSS
color	string	currentColor	Fill color of the icon
title	string	—	Accessible name, rendered as a title element
...rest	SVGProps	—	All standard SVG attributes are forwarded

Accessibility

Icons are decorative by default and hidden from assistive technology. To make an icon meaningful, give it a name with aria-label or title. For icon-only buttons, label the button instead.

<SiSearch />                     // decorative: aria-hidden="true"
<SiSearch aria-label="Search" /> // meaningful: role="img"

<button aria-label="Close">
  <SiX />
</button>

For LLMs

A usage guide for AI coding tools is available at /llms.txt. A full index of every icon name with tags is at /llms-full.txt.

Tree Shaking

Stera Icons supports tree shaking out of the box. Only the icons you import will be included in your final bundle. Each icon is individually exported, so your bundler can eliminate unused icons automatically.