> For the complete documentation index, see [llms.txt](https://docs.akinon.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.akinon.com/technical-guides/project-zero/next.js/icons.md).

# 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
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://docs.akinon.com/technical-guides/project-zero/next.js/icons.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.