Skip to content

FISYCO

Icons in React

Updated November 8, 2026

An icons library takes icon components from a Figma file and delivers them to your repository as a pull request: one React component per icon, a single SVG sprite, or a package of SVG files. This page sets one up and shows what reaches your code.

Before you start

Figma is connected to your workspace, and the file with the icons is visible to that connection. See Connect Figma.
A repository is connected to the project. Pull requests go there. See Connect a repository.
You're a maintainer of the project, or a workspace owner or admin.

Create the library

Open the project and click Add library. Choose Icons and click Continue.
General settings. Enter a Name and paste the link to the Figma file.
Source. Pick a page on the left, then the sections that hold icons. Each component or component set inside them becomes one icon. Other layers aren't exported.
Generation. Set the output directory and the generation mode (next section).
Click Create library. The first sync starts on its own.

Everything can be changed later in the library's Settings, on the General, Source, Generation and Pull Requests tabs.

The Browse tab shows every icon grouped by its Figma section, with a search field. The switch above the grid shows main, the icons already in your code, or figma/head, the icons as they are in Figma now. Once your first pull request is merged, main shows the delivered icons.

Choose where files go and how they're built

Open Settings, then Generation.

Output directory is the folder in your repository for the generated files. Type a path or click Choose folder to pick one from the repository. A folder that doesn't exist yet is created by the first commit.

Then pick a Generation mode:

Mode	What lands in the output directory	Use it when
Components	one React component file per icon, `.tsx` or `.jsx`	the app is React and icons are styled like text
SVG sprite	one sprite file with a `<symbol>` per icon	many icons per page, or code that isn't React
Package	`icons/*.svg`, a JSON manifest and `package.json`	several apps share one icon set

Components are always generated for React. For another framework, use the sprite or the package.

Component settings

Output pattern, for example {section}/{name}: {page}, {section} and {name} build the path of each file.
TypeScript, Export type (Named export or Default export) and Declaration style (Arrow function or Function declaration).
Props position: where the props you pass go on the <svg>, After or Before its own attributes, or None.
Icon mode (1em sizing): the icon follows the font size around it.
Default SVG attributes: a width, height and colour applied to every component.
Replace attribute values: swap a colour from Figma for currentColor, so icons follow the text colour. Add one rule per colour, for example #000000 → currentColor.
Component template: a preset, or your own template for the file.

File names are in kebab case and component names in PascalCase. With the default settings, an icon named arrow-right becomes arrow-right.tsx in the output directory, with a named export:

import { ArrowRight } from "../assets/icons/arrow-right";

export function NextButton() {
  return (
    <button type="button">
      Next <ArrowRight aria-hidden />
    </button>
  );
}

Sprite and package settings

The sprite has a Sprite file name, a Symbol id prefix and its own Replace attribute values list. Each symbol id is the icon name, with the prefix in front if you set one, such as icon-arrow-right.

Styles don't reach inside <use>, so a sprite icon keeps its Figma colour unless you replace it. Add a sprite rule such as #000000 → currentColor to colour icons from CSS. Component rules don't apply to the sprite.

The package has a Package name, an Entry file name, a Package format (ESM, CJS or both) and Add exports map to package.json. Package icons keep the colours drawn in Figma.

Get the pull request

After a sync, the library header shows how many icons are pending, and the Pending tab lists them. See Review changes for how to read them.

Click Create PR in the header.
FISYCO opens a pull request that adds, updates and removes icon files. Its description lists what changed.
If the library already has an open pull request, the button reads Update PR, and the new files go into that same pull request.

FISYCO removes only files it wrote in an earlier delivery, never other files in the folder. When the pull request is merged, its icons count as delivered.

On the Pull Requests tab you set the Branch name, the PR title and a label for added, modified and removed icons. A label is added only when the pull request has that kind of change. If your plan includes automatic pull requests, the tab also has Automatically create a PR after each sync.

New syncs start on their own: FISYCO registers a webhook on the Figma file, so publishing the library in Figma triggers one. When the header shows Changes detected, Sync now starts a sync by hand.

Renames and name conflicts

A renamed icon in Figma keeps its node ID, so FISYCO shows it as a rename, not as a removal and a new icon.

If two icons normalise to the same name, the sync run shows Name conflict detected and suggests a name such as name-2. Open the run from History and click Apply rename. The new name stays with that icon through future syncs.