> ## Documentation Index
> Fetch the complete documentation index at: https://wonder.design/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Icons

> Add, manage, and reuse icons in your Wonder files.

Every Wonder file has its own icon library, which lives in the **Icons** panel in the sidebar. Icons are vectors, so they stay crisp at any size, and you can recolor them to match your design.

![The Icons panel in the Wonder sidebar, showing the file's icon library](https://mintcdn.com/wonder-0722b0f6/txvZZNRKXPPmeY_S/images/icons/panel.webp?fit=max\&auto=format\&n=txvZZNRKXPPmeY_S\&q=85\&s=312ea43dfe9ad76a026dfc2b3463122d)

## Add an icon to your library

You can build up your library in two ways.

### From your codebase

When you connect a repository, Wonder can import the icon set your product already uses:

1. Connect your Wonder file to your codebase via a [GitHub repository](https://wonder.design/docs/bring-your-code-onto-the-canvas.md).
2. Ask Wonder AI to import your icons.
3. Find them in the **Icons** panel, ready to use.

### Add your own

You can also turn any SVG element into an icon:

1. Add an SVG to the canvas via drag and drop, or [generate an SVG using Quiver AI](https://wonder.design/docs/generate-images-and-vectors.md)
2. Select the element or frame on the canvas.
3. In the properties panel, find the **Icon** section and click **Add to library**.
4. It becomes a reusable icon you can use anywhere in the file.

![Turning a selected element into an icon with the Add to library button in the properties panel](https://mintcdn.com/wonder-0722b0f6/txvZZNRKXPPmeY_S/images/icons/add-to-library.webp?fit=max\&auto=format\&n=txvZZNRKXPPmeY_S\&q=85\&s=8d594880e9e336e33423bfe4daa482ea)

## Use an icon

You can either select an SVG from the sidebar panel, or replace it by **selecting** an element and clicking on "Link Icon".

![Choosing an icon from the file's library in the Icon dropdown, with a searchable list](https://mintcdn.com/wonder-0722b0f6/txvZZNRKXPPmeY_S/images/icons/use-icon.webp?fit=max\&auto=format\&n=txvZZNRKXPPmeY_S\&q=85\&s=fe8963484307312cb1bb8a9e12da47b0)

Once an icon is placed, you can:

* **Recolor it** from the **Colors** section of the properties panel. Icons also support [variable](https://wonder.design/docs/variables.md) colors.
* **Resize it** freely: it's a vector, so nothing gets blurry at any size.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.