# Bloom

> A 24px SVG icon set in five styles: 1,260 icons, each drawn once as Linear and grown into Line Duotone, Outline, Bold and Bold Duotone. Every file draws in currentColor. Names describe shapes (gear, magnifier, tray-arrow-down); uses are tags (settings, search, download). Look names up; do not guess them.

Version 0.9.0. The site is https://bloomicons.com, and all paths below are relative to this file.

How an agent finds and uses an icon:

1. Look the use word up: fetch `find/<word>.json` with one lowercase word, such as `find/settings.json` or `find/download.json`. The answer lists the best icons first with their category and tags (`icons`), how many matched (`total`), and what an old name became (`renamed`). For a phrase, fetch each word and keep the names that appear in both.
2. Take the file: `svg/<style>/<name>.svg`, such as `svg/linear/gear.svg`. Styles: linear (the default for interfaces), line-duotone, outline, bold (filled, for active states), bold-duotone. Copy the file unchanged and set its size and color where it is used.
3. Use only names that a lookup returned. A name that is not in `icons.json` does not exist; `renames` in `icons.json` lists the old names and what to use now.

The 39 icons marked `"motion": true` in `icons.json` also have `svg/motion/<style>/<name>.svg`: the same drawing, moving while the button or link around it is hovered. Paste it inline; it carries its own `<style>`, never moves on touch or keyboard focus, and stays still under reduced motion.

An agent that can run commands can do the same with the npm package `bloom-icons`: `npx -y bloom-icons@0.9.0 find settings download` lists names, `npx -y bloom-icons@0.9.0 get gear --style linear` prints the file (`--motion` for the moving one), and `npx -y bloom-icons@0.9.0 mcp` answers both over MCP (stdio).

## Data

- [icons.json](icons.json): every name with its category and tags, the five styles, the categories and the renames, in one file of about 230 KB
- [find/settings.json](find/settings.json): an example lookup; there is one file for each word in the names, tags and categories
- [svg/linear/gear.svg](svg/linear/gear.svg): an example file; every icon exists in all five style folders
- [icons/gear.html](icons/gear.html): an example icon page; every icon has one at `https://bloomicons.com/icons/<name>`, with its five SVGs, its category and tags, and the CLI command that prints the file

## Docs

- [Introduction](docs/index.html): what Bloom is, how names and tags work
- [Using the files](docs/files.html): sizes, color, stroke and the duotone parts
- [icons.json](docs/manifest.html): every field of the list
- [AI agents and the CLI](docs/ai.html): the bloom-icons command, its MCP server and the Claude Code skill
- [Styles](docs/styles.html): how each of the five styles is made
- [Renamed icons](docs/renames.html): old names and the icons to use now

## Optional

- [Icon browser](icons.html): search and copy icons in a web page
- [Grid and rules](docs/grid.html): the drawing rules every icon follows
- [Changelog](docs/changelog.html)