# Icons

## <mark style="color:red;">Generate Icons</mark>

SVG icons to be used in the project are stored under the `src/assets/icons` folder.

```
There are two different methods that can be used for icon usage.

1. Icons can be used by generating an SVG Sprite.

2. Icon fonts can be generated and used by using the VS Code extension developed by the Project Zero Team.
```

## <mark style="color:red;">Steps for Generating an Icon Font​</mark> <a href="#steps-for-generating-an-icon-font" id="steps-for-generating-an-icon-font"></a>

1. Obtain and install the VS Code extension.
2. Add the SVG icons you want to convert to an icon font under the `src/assets/icons` folder.
3. Inside VS Code, open the command palette screen by using the shortcut `CMD + SHIFT + P` (or `CTRL + SHIFT + P`).
4. In the command palette screen, run the `Generate Icons` command.
5. After running the command, you will find the relevant files starting with `pz-icon` generated under the `src/assets/fonts` folder.
6. Icon can now be used along with its name within the `<Icon>` component to generate the icon font.

## <mark style="color:red;">Usage of the Icon Component​</mark> <a href="#usage-of-the-icon-component" id="usage-of-the-icon-component"></a>

Import the Icon component into the file where you want to use it.

```
import { Icon } from '../components';
```

Call the imported component within your page.

```
<Icon name="akinon" size={34} className="text-red" />
```

Props that the Icon component accepts:

* **`name` (string):** The name of the icon you want to use. This prop is mandatory.
* **`size` (number):** Used to specify the size of the icon. The default value is 18px.
* **`className` (string):** Used for additional styling for the icon (e.g., color).


---

# 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://docs.akinon.com/technical-guides/project-zero/next.js/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.