> For the complete documentation index, see [llms.txt](https://better-design.com/llms.txt)

[← Back](https://better-design.com/)

# Keep one icon set across your agent's UI

Pick one icon library, lock it in the project, and every icon your agent adds comes from that set.

## Lock one icon library for the whole project

An AI coding agent mixes icon sets when nothing tells it which one the project uses: an outline arrow from one library sits next to a filled gear from another. Better Design stops this by locking one library in the project. Your agent checks the lock before it adds an icon, so every new icon comes from the same set.

## Pick the library that fits your design system

find-icon-library searches icon libraries by style, such as "minimal clean professional" or "friendly rounded warm", and shows you the closest matches. You choose one. The agent does not pick for you.

## Find each icon by name

find-icons searches the chosen library for one concept at a time, such as "inbox" or "settings". Every name it returns exists in that library.

## Own the icons as components

install-icons turns the chosen icons into small React components, such as <HomeIcon />, in components/icons. The SVG lives in your code, so the page loads no icons from a third-party server at runtime. It can also write plain.svg files.

## Every later icon comes from the same set

detect-icon-library reads the lock file in components/icons/.library.json before any new icon work. When a library is already locked, the agent installs the new icon from that library and never switches mid-project.

## Start

Install Better Design in your coding agent from [the install page](https://better-design.com/mcp/install), then ask it for the icons a screen needs.