FISYCO

Public beta
The gapImpactHow it worksProductSecurity
BlogDocumentation
Sign in

Icons in React

Updated September 30, 2026

An icons library takes icon components from pages and sections of a Figma file and delivers them to your repository as a pull request. This page sets one up for a React codebase.

Before you start

  • Figma is connected to your workspace, and the file with the icons is visible to that connection.
  • 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

  1. Open the project and click Add library, then choose Icons.
  2. General settings. Give the library a name and paste the link to the Figma file.
  3. Source. Pick the pages that hold icons, and optionally the sections inside them. Only components are read; loose frames are ignored.
  4. Generation. Choose where the files go and how they're built (next section).
  5. Click Create library. The first sync reads the icons and shows them in the library.

Choose a generation mode

For Components, the main settings are:

  • Output pattern, for example {section}/{name}: {page}, {section} and {name} build the path of each file.
  • TypeScript, Export type (named or default) and Declaration style (arrow function or function declaration).
  • Icon mode (1em sizing): the icon follows the font size around it.
  • 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.

Colour replacement applies to the Components mode only. A sprite and a package keep the colours as drawn in Figma.

Get the pull request

After a sync, open the library and click Create PR. The pull request adds, updates and removes icon files, and its description lists what changed. Each kind of change can carry its own label, set in the library's PR settings.

To skip the button, turn on Automatically create a PR after each sync in the PR settings. When Figma webhooks are connected, publishing the library in Figma starts the sync on its own.

Renames

A renamed icon in Figma keeps its node ID, so FISYCO shows it as a rename, not as a deletion and a new icon. If two icons normalise to the same file name, the sync flags the conflict and suggests a suffix such as name-2. You can also give an icon its own code name in the library; the name survives future syncs.

Icons in React | FISYCO