Your brand
Icons
Choose the icon systems your brand uses, set their weight and style, or upload your own SVG set.
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.
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.
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.
Components show which icons they use in their Details tab. See Components.
Next steps
Something missing or wrong on this page? Write to support@heyarchetype.com.