Stratis Icons React

877+ free React SVG icon components generated from Stratis UI Icons. Tree-shakeable, fully typed, and customizable by size and color.

• 🔗 Demo: https://dkosolap.github.io/stratis-icons-react/
• 📦 npm: https://www.npmjs.com/package/stratis-icons-react
• 💻 GitHub: https://github.com/dkosolap/stratis-icons-react
• 🎨 Figma source: https://www.figma.com/community/file/1177180791780461401/stratis-ui-icons-1000-free-figma-icons

Install

npm install stratis-icons-react
# or
pnpm add stratis-icons-react

Demo

Browse all available icons online:

https://dkosolap.github.io/stratis-icons-react/

Run the local icon browser:

pnpm install
pnpm dev

The demo includes search, icon preview, and click-to-copy React usage snippets.

Build the static demo:

pnpm build:demo

Library Build

Build the package before publishing:

pnpm build

Usage

Every icon is a React component that accepts size, color, and any standard SVG prop. Import only what you use — the package is tree-shakeable.

import { Search02Icon } from 'stratis-icons-react';

export function SearchButton() {
  return <Search02Icon size={24} color="#2563eb" />;
}

Props

| Prop | Type | Default | Description | | ---------- | ------------------- | ---------------- | -------------------------------------------- | | size | number \| string | 24 | Sets both width and height. Accepts a unitless number (24) or any CSS length string ("16px", "1rem", "1.5em", "100%"). | | fontSize | number \| string | — | Alias for size, handy when sizing icons like text. Used only when size is not set. | | color | string | 'currentColor' | Fill/stroke color of the icon. | | ...rest | SVGProps | — | Any standard SVG prop, incl. className, style, onClick, ref, etc. |

<CloseIcon size={32} />        // 32 × 32
<CloseIcon size="1.5rem" />    // scales with root font size
<CloseIcon size="100%" />      // fills its container
<CloseIcon fontSize={16} />    // same as size={16}

size always wins over fontSize when both are provided.

Styling with className (Tailwind CSS)

Every icon forwards className to the underlying <svg>, so Tailwind utilities work out of the box. Because the icon defaults to color="currentColor", Tailwind text-color utilities control the icon color, and width/height utilities override size:

import { HeartIcon } from 'stratis-icons-react';

export function LikeButton() {
  return (
    <button className="text-rose-500 hover:text-rose-600">
      <HeartIcon className="w-6 h-6 transition-colors" />
    </button>
  );
}

Styling with style

Inline styles are forwarded as well:

import { BellIcon } from 'stratis-icons-react';

export function Notification() {
  return (
    <BellIcon
      style={{ color: '#f59e0b', verticalAlign: 'middle' }}
      className="mr-2"
    />
  );
}

Tip: leave color at its default (currentColor) when styling with CSS or Tailwind so the icon inherits the surrounding text color. Pass the color prop only when you want a fixed color that ignores CSS.

Using the sx prop (MUI)

The icons forward className, style, and ref, so they work with MUI's styled() helper out of the box. Wrapping an icon with styled() enables the full sx prop — theme tokens, shorthand props, and responsive breakpoints — with no extra dependency in this package:

import { styled } from '@mui/material/styles';
import { HeartIcon } from 'stratis-icons-react';

const Heart = styled(HeartIcon)();

export function Favorite() {
  return (
    <Heart
      size={32}
      sx={{
        color: 'primary.main',
        m: 2,
        '&:hover': { color: 'error.main' },
      }}
    />
  );
}

Use the size (or fontSize) prop for sizing. Sizing through sx works too, but must target width/height (e.g. sx={{ width: 32, height: 32 }}) — these icons render with fixed width/height, not 1em, so sx={{ fontSize }} alone will not resize them. The sx prop itself comes from MUI's styled()/ThemeProvider runtime — this package stays dependency-free.

Attribution

This package contains React components generated from Stratis UI Icons - 1000+ Free Figma icons.

Original work: Stratis UI Icons - 1000+ Free Figma icons

License: Creative Commons Attribution 4.0 International (CC BY 4.0)

License URL: https://creativecommons.org/licenses/by/4.0/

Changes made: icons were exported or converted into React SVG components and packaged for npm.

This package is not affiliated with, sponsored by, or endorsed by the original Stratis UI Icons author unless explicitly stated by that author.

Publishing

Publish the built package to npm or a private registry:

pnpm build
npm publish