# Icons

{% embed url="<https://youtu.be/FdabjOlaCUQ>" %}

Icons just work, you can copy paste any code from [the dsfr documentation](https://www.systeme-de-design.gouv.fr/elements-d-interface/fondamentaux-techniques/icone) and expect things to work.

{% hint style="info" %}
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](https://react-dsfr.codegouv.studio/readme) (else you'll see a blue square instead of your icon).
{% endhint %}

```jsx
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")} />
<>
```

<figure><img src="https://312678300-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcccd1rMVr8ooPvsgugcw%2Fuploads%2FwjyFbcluz41mkAu3CxWh%2Fimage.png?alt=media&#x26;token=b964fdf8-88ef-401c-b9dd-c942cd92c82e" alt=""><figcaption></figcaption></figure>

But on top of that, all icons from [Remixicon](https://remixicon.com/) are supported.

You can go and search for a keyword:

<figure><img src="https://312678300-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcccd1rMVr8ooPvsgugcw%2Fuploads%2FGVfepgGgkFIypA6qNrjf%2Fimage.png?alt=media&#x26;token=a4c3e18d-36d9-40e2-9d24-62b08d6601cd" alt=""><figcaption><p>Searching for "download" on remixicon.com</p></figcaption></figure>

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:

```jsx
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")} />
<>
```

<figure><img src="https://312678300-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcccd1rMVr8ooPvsgugcw%2Fuploads%2F9adxAKMTinzM0SGfXEAG%2Fimage.png?alt=media&#x26;token=a9e59b50-436a-45da-ad2d-f7bb2e109e69" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
No need to worry about importing the correct icons file.

It's done automatically for you when you. &#x20;
{% endhint %}

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

<figure><img src="https://312678300-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcccd1rMVr8ooPvsgugcw%2Fuploads%2FVNqMQHF779BFfzWwKbQP%2Ffrcx.gif?alt=media&#x26;token=7b22ebdb-3767-45cb-98fb-b2b60f313b60" alt=""><figcaption><p>Using fr.cx()</p></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://react-dsfr.codegouv.studio/icons.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.