Getting started

Add icons to your project with SVG or React components.

React

npm

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

npm install fyicons

Import an icon by name and use it as a component:

import { IconSun } from 'fyicons';

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

Icons render at 16 px and inherit the surrounding text color. The React guide covers props, imports, and accessibility.

Editable source with shadcn

Use the shadcn registry to copy selected icons and their helpers into your project. You can edit the source, and the fyicons npm package is not required.

Start with a React and TypeScript project that has a shadcn components.json file. If you have not set up shadcn, follow its installation guide. FYIcons uses a GitHub registry, so you do not need to add a registry namespace to components.json.

Add icons

Find an icon, open its details, and copy its shadcn command. For example, add the Sun icon from your project directory:

npx shadcn@latest add robertweisbecker/fyicons/sun

To add multiple icons at once, include each icon address in the same command:

npx shadcn@latest add \
  robertweisbecker/fyicons/sun \
  robertweisbecker/fyicons/moon \
  robertweisbecker/fyicons/heart

You can also replace npx with pnpm dlx, yarn dlx, or bunx.

Use the components

Icons go into a fyicons folder under your configured components directory. With the components alias set to @/components, import each icon as a default export:

import IconSun from '@/components/fyicons/IconSun';

<IconSun size={24} />;

Each install includes the shared base.tsx and types.ts helpers and the MIT LICENSE. Keep these files with your icons. The components accept the same React props, including size and color.

Find icons from the terminal

Search the registry by name without leaving your project:

npx shadcn@latest search robertweisbecker/fyicons --query heart

Pin a version

Version pinning is optional. Without a tag, commands use the repository's default branch. Append a release tag to install a specific release:

npx shadcn@latest add 'robertweisbecker/fyicons/sun#fyicons@0.2.1'

For a multiple-icon install, append the tag to each icon address. See the changelog for release numbers.

Preview updates

Copied components do not update automatically. To preview an update, run the add command again with --dry-run. This shows the proposed changes without writing files:

npx shadcn@latest add robertweisbecker/fyicons/sun --dry-run

Use --diff instead to inspect file differences. Review changes to your icons and shared helpers, especially if you have edited them locally. Run the command without the preview flag when you are ready to apply the update; the CLI asks before replacing existing files. The shadcn CLI guide covers all options.

SVG files

Use SVGs in plain HTML, other frameworks, or design tools. Browse the icons, select an icon, and use Copy SVG to copy its markup or Download to save its SVG file.

For quick actions, right-click an icon in the grid, or long-press it on mobile. The context menu shows the icon's name and offers Copy name, Copy SVG, and Download.

Download the complete collection as a ZIP:

For a smaller collection, open the icons page on a desktop screen, select icon checkboxes, open Saved, and choose Download all. You can also download an individual icon with the download button in its saved row.

Each ZIP contains SVG files, a README, the MIT license, and a manifest with names, categories, and checksums. The preview size control does not change the downloaded files; they keep their 16×16 canvas.

Use the SVG in your markup as you would any other SVG. Keep the default classes to allow global styling:

<svg
  class="fy-icon fy-plus"
  xmlns="http://www.w3.org/2000/svg"
  width="16"
  height="16"
  fill="none"
  viewBox="0 0 16 16"
  aria-hidden="true"
>
  <path
    fill="currentColor"
    d="M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5
       a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5
       A.5.5 0 0 1 8 2"
  />
</svg>