☑
Icons

Icons just work, you can copy paste any code from the dsfr documentation and expect things to work.
import { fr } from "@codegrouvfr/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.
The dsfr/utility/icons/icons.css file is patched by the only_include_used_icons script.
This script look at your code to see what icons you are actually using then proceed to patch icon.css file so that only thoses icons are defined.
The fr.cx() utility is also handy for autocompleting the icons that are supported:
Using fr.cx()
Components
CSS in JS
Last modified 2mo ago