---
title: Icons
description: Choose the icon systems your brand uses, set their weight and style, or upload your own SVG set.
---

> Source: https://www.heyarchetype.com/docs/brand/icons

Icons tells agents which icon systems your brand uses, so they stop picking icons from whatever library they know best. You can adopt a popular open-source system, upload your own set, or both.

## Add an icon set

Icons has no row in the sidebar. Open **Foundations** and click the **Icons** card, then press **Add set**. The **Add icon set** drawer has two parts.

**Popular** lists the systems Archetype knows, each with its license:

| System | License |
| --- | --- |
| Lucide | ISC |
| Material Symbols | Apache-2.0 |
| Material Design Icons | Apache-2.0 |
| Phosphor | MIT |
| Tabler Icons | MIT |
| Heroicons | MIT |
| Feather | MIT |

Click a system to add it. It's a referenced set: Archetype stores your choice and settings, and agents use that system's own icon names and packages.

**Custom** creates an empty set for your own artwork. Type a name, such as "Brand Icons", and press **Create**.

## Set the weight and style

Open a set and choose **Settings** from the **…** menu in the header. What you can set depends on the system:

- **Weight** for Phosphor (Thin, Light, Regular, Bold, Fill, Duotone) and Material Symbols (Regular, Light).
- **Style** for Heroicons (Outline, Solid, Mini, Micro), Tabler Icons and Material Design Icons (Outline, Filled), and Material Symbols (Outlined, Rounded, Sharp and their filled versions).
- **Stroke** for Lucide, Tabler Icons and Feather: 1, 1.5, 2, 2.5 or 3.
- **Default size** in px, from 8 to 128.

Each option is drawn with the same sample icon, so you can compare them side by side. The settings panel also links to the system's homepage and names its license. Changes are held until you press **Save**.

## Browse and copy icons

A referenced set's page shows its icons in a grid. Use **Search icons** to find one, and the slider to change the grid size. Right-click an icon, or use its menu, to **Copy SVG**, **Copy name** or **Download SVG**. The SVG you copy uses the set's current weight, style and stroke.

## Upload a custom set

Open a custom set and drag SVG files onto the page, or click to browse. Once the set has icons, the **Add icons** button in the header adds more. Each file becomes one icon, named after the file. Only SVG files are accepted.

Right-click an icon to copy or download it, or to delete it with **Delete icon**. Drag icons to reorder them.

To bring a whole icon library in from a Figma file, use the Figma importer. See [From Figma](/docs/import/figma).

## Status, history and comments

Each set has a status in its header, from **Draft** to **Complete**. Only sets that are Complete, or have no status, are served to agents. See [Item states](/docs/workspace/states).

The **…** menu also opens the set's **History**, and lets you rename or delete it.

## How agents use icons

An agent first gets the list of your sets, each with its slug, kind, Iconify prefix, style and default size. Then:

- For a referenced set, it gets the Iconify ID and package import, the license and the homepage, and uses that system's own icon names.
- For a custom set, it gets every icon as inline SVG. It can also describe what an icon needs to mean (for example "download") and get back the one from your set that fits.

A set can also carry when-to-use tags and guidance, which agents read with it. These are set over MCP with `update_brand`, the same way as for logos and artifacts. See [MCP tools](/docs/agents/tools).

Components show which icons they use in their **Details** tab. See [Components](/docs/brand/components).

## Next steps

:::cards
- [Components](/docs/brand/components): See where your icons are used.
- [MCP tools](/docs/agents/tools): The calls agents make to fetch icons.
- [Item states](/docs/workspace/states): Control what agents can see.
:::