React

Use typed icon components with size and color props, CSS classes, and standard React SVG props.

Installation

Install the package in a project with React 18.2+ or React 19:

npm install fyicons

Import an icon by name:

import { IconSun } from 'fyicons';

export function LightButton() {
  return (
    <button type="button" aria-label="Switch to light mode">
      <IconSun size={24} color="#2563eb" />
    </button>
  );
}

The package uses ESM and supports tree shaking, so a compatible bundler removes unused icons. Direct imports are also available:

import IconSun from 'fyicons/icons/IconSun';

For editable component source, follow the shadcn instructions. Those components accept the same props.

Size

Use size to set both dimensions. The original 16×16 viewBox stays the same when the icon scales.

<IconSun size={24} />

Inline with text

Set size="1em" to match the surrounding font size. Use inline-block, inline-flex, or inline-grid to keep the SVG in the text flow.

<span className="text-xl">
  Good morning <IconSun size="1em" className="inline-block" />
</span>

Color

Use color to set an individual icon's color. Leave it unset to inherit the surrounding text color through currentColor.

<IconSun color="#2563eb" />

Or use a className; it will be added after the default classes:

<IconSun className="text-blue-500" />
// Renders class="fy-icon fy-sun text-blue-500"

See Styling for CSS examples. CSS color rules and inline styles can override the color prop, which is an SVG presentation attribute.

Usage with states

While the library primarily includes outline-style icons, a good number of them have filled or otherwise stateful variants where it makes sense. Instead of having to hack your own version, just find and use the corresponding variant instead.

Booleans

Icons with logical boolean use cases, like hearts and stars, have both outline and filled variants so you can swap between them when toggling. A few examples:

'use client';

import { useState } from 'react';
import { IconHeart, IconHeartFill } from 'fyicons';

export function LikeButton() {
  const [liked, setLiked] = useState(false);

  return (
    <button type="button" aria-pressed={liked} onClick={() => setLiked(!liked)}>
      {liked ? <IconHeartFill className="text-red-400" /> : <IconHeart />}
      Like
    </button>
  );
}

Media playback icons also have alternates for commonly-toggled actions:

Meters and progress

A few icon families represent levels or stages: Battery, Signal, Gauge, Meter, and ProgressTask.

If you find you're missing a step, families with fewer variants can reuse a state across multiple steps, or you can request an additional step by opening an issue. Choose thresholds that fit what your application represents:

const progressIcons = [
  IconProgressTaskTodo,
  IconProgressTask25,
  IconProgressTask50,
  IconProgressTask75,
  IconProgressTaskDone,
];

// level ranges from 0 to 100.
const Progress = progressIcons[Math.floor(level / 25)];

<Progress aria-label={`Progress: ${level}%`} />;

Loading indicators

The library currently includes Loader, Spinner, and Rays, which can be combined with keyframe animations for indeterminate or loading states. Unlike other icons, the former two are duotone with additional paths at lower opacities, so you get the full effect:

import { IconSpinner, IconLoader, IconRays } from 'fyicons';

<IconSpinner
  aria-label="Loading"
  className="animate-spin [animation-timing-function:steps(10)] motion-reduce:animate-none"
/>;
<IconLoader
  aria-label="Loading"
  className="animate-spin motion-reduce:animate-none"
/>;
<IconRays
  aria-label="Loading"
  className="animate-spin motion-reduce:animate-none"
/>;

Shared defaults with FyiProvider

In FYIcons 0.3.0 and later, FyiProvider lets a group of icons share size, color, className, or style. Import the provider and its icons from fyicons/client.

import { FyiProvider, IconBookmark, IconFolder } from 'fyicons/client';

export function FileNavigation() {
  return (
    <FyiProvider size={20} className="nav-icon" color="red">
      <nav aria-label="Files">
        <a href="/files">
          <IconFolder /> All files
        </a>
        <a href="/saved">
          <IconBookmark size={16} /> Saved files
        </a>
      </nav>
    </FyiProvider>
  );
}

• Both icons get the nav-icon class,
• the folder inherits the 20px size,
• and the bookmark uses its own 16px size.

A nested provider can override defaults for a smaller group. Classes accumulate, and style properties merge from the outer provider to the inner provider to the icon, with the last value winning for each property.

Only icons imported from fyicons/client read these defaults. Use individual props or CSS for icons from fyicons, direct icon imports, and shadcn source icons.

API

All props are optional. Components also accept standard React SVG props and event handlers. Many icons use filled paths, so strokeWidth does not change their visual weight.

Accessibility

For non-decorative standalone icons, be sure to name the information or action that the icon represents. Based on your use case, you can take one of several different approaches:

<span>
  <IconSun /> Light mode
</span>

<IconGitMerge aria-label="Status: Merged" />

<button type="button" aria-label="Switch to light mode">
  <IconSun />
</button>

<span id="light-mode-label">Light mode</span>
<IconSun
  aria-labelledby="light-mode-label"
  role="img"
  aria-hidden={false}
/>