GitHubComponentsPlayground

☑️Icons

Icons just work, you can copy paste any code from the dsfr documentation and expect things to work.

Whenever you add a new icon to your project, restart your local server. This will launch the npx react-dsfr update-icons script configured in the Initial setup (else you'll see a blue square instead of your icon).

import { fr } from "@codegouvfr/react-dsfr";
import { Button } from "@codegouvfr/react-dsfr/Button";

<>
  <Button iconId="fr-icon-checkbox-circle-line">Label button MD</Button>
  <span className={fr.cx("fr-icon-ancient-gate-fill")} aria-hidden={true}/>
  <i className={fr.cx("fr-icon-ancient-gate-fill")} />
<>

But on top of that, all icons from Remixicon are supported.

You can go and search for a keyword:

Searching for "download" on remixicon.com

When you find something fitting, you can copy paste the class name ( starting with ri- ) and use it anywhere you would have used a .fr-icon-xxxx ! 🚀

Example:

import { fr } from "@codegrouvfr/react-dsfr";
import { Button } from "@codegouvfr/react-dsfr/Button";

<>
  <Button iconId="ri-mail-download-line">Label button MD</Button>
  <span className={fr.cx("ri-mail-download-line")} aria-hidden={true}/>
  <i className={fr.cx("ri-mail-download-line")} />
<>

No need to worry about importing the correct icons file.

It's done automatically for you when you.

The fr.cx() utility is also handy for autocompleting the icons that are supported:

Using fr.cx()
PreviousComponentsNextCSS in JS

Last updated

Was this helpful?