# VS Modules / Icon

Catalog: https://visual.systems/api/modules/icon
Template: https://visual.systems/api/modules/icon/example.tsx

## Setup

1. Extend the project's existing Icon.tsx, or start with the template. Keep its client boundary and unique SVG IDs.
2. Match the existing icon family, style, stroke width and corner radius. If unset, choose once from the catalog.
3. Record the component path, set, exact variant ID and stroke setting in project instructions. Reuse them for future icons; change only when requested.

## Find and add icons

Base URL: https://visual.systems
GET /api/modules/icon/search?set=huge&q=bookmark&limit=8

Use the project's set (huge, central, nucleo or simple-icons) and add variant=<catalog variant ID>.
Results include id, svgUrl and jsxUrl. Preview svgUrl, then copy jsxUrl into the local registry. Keep the returned ID and variant. Use nextOffset to paginate.

Source only needed icons. Do not fetch icons at application runtime or install a whole icon library.

## Style

- Keep stroke defaults in Icon.tsx, not individual call sites.
- Central uses variants for stroke width, corners and line/filled styles. Huge supports stroke=0.5–4. Read available styles and sizes from the catalog.
- Use actual variant artwork; do not simulate corners or fills. Preserve viewBoxes, gradients, masks and unique SVG IDs.
- Simple Icons provides single-color brand logos with variant=default. Use currentColor, black, white or another supported color; there are no separate wordmark or theme variants.
- Inherit currentColor for single-color interface icons. Label icon-only controls; hide decorative icons from assistive technology.
- If an icon is missing, try another search. Report remaining gaps without switching styles or libraries.

## Exports

GET /api/modules/icon/{set}/{name}.jsx?variant={variant}
.svg returns compact SVG artwork without comments. .json returns SVG, JSX and license metadata; retain source notices with your project licenses.
SVG options: size=8–256, color=currentColor|Tailwind|hex (encode #), stroke for supported sources only.
JSX uses the local component's size and color props.

400: fix the request. 404: search again. If unavailable, keep existing local icons and report the gap.

Example: https://visual.systems/api/modules/icon/example.tsx