Docs / React
HTML embedReactVueCDN

React — @openstroke/react-icons

Every Free OpenStroke icon as a plain React function component, generated straight from the icon database. Import only the style folder you use and your bundle only pays for those icons.

Install

bash
npm install @openstroke/react-icons react

Subpath imports (recommended)

Each {type}/{style} folder is its own build entry. Importing from a subpath only pulls in the icons in that one type + style set — this is the tree-shakeable pattern and the one to reach for by default.

tsx
import { Heart } from '@openstroke/react-icons/classic/line';

<Heart size={24} className="text-red-500" />

There are 9 valid subpaths — one per type + style combination that actually has icons:

Every icon takes a size prop

size (default 48) sets both width and height. Everything else you pass — className, style, onClick, any other React.SVGProps<SVGSVGElement> — spreads straight onto the root <svg>.

Component names

Names are PascalCase, derived from the icon's slug. A slug that starts with a digit gets an Icon prefix, since 500Pxalone isn't a valid identifier:

text
heart               -> Heart
table-tennis-paddle-ball -> TableTennisPaddleBall
500px               -> Icon500Px   // leading digit gets an "Icon" prefix

Color theming — a real limitation

Icons whose source SVG uses exactly one literal color have that color replaced with currentColor, so color: redin CSS actually changes the icon. Icons with two or more literal colors — every Duo-style icon, plus a number of nominally single-tone icons that actually use two very close near-black shades — keep their literal colors as-is. Those aren't themeable via CSS color; there's no single "theme color" to substitute in a multi-color SVG. This is a known, deliberate limitation of the color rule, not a bug.

Free, non-Brands & Logos icons only

The package ships Free icons, excluding the Brands & Logos category — those are third-party trademarks (Adobe, Apple, Amazon, and so on), not original artwork, so they can't be distributed under this package's MIT license. Paid icons stay web-app-only, gated behind the OpenStroke Cloud subscription. Both are deliberate licensing boundaries, not gaps in the package. Brand icons ship separately as @openstroke/react-icons-brands, CC0-licensed with an explicit trademark disclaimer — same subpath API, different install.

Root import (convenience)

A root-level import also exists, namespaced per folder (ClassicLine, SharpDuo, etc.) rather than flattened — the same icon slug legitimately recurs in every style folder it has a variant in, so a flat re-export would collide. Fine for quick prototyping; it pulls the entire icon set into your bundle, so prefer the subpath imports above for anything shipped to production.

tsx
import { ClassicLine } from '@openstroke/react-icons';

<ClassicLine.Heart size={24} />