figma-icons-iconifylisted

# Iconify Icons for Figma Fetch real, pixel-perfect SVG icons from the [Iconify API](https://iconify.design/) and insert them into Figma designs. **Never draw icons manually with vector paths** — always use this workflow to get accurate icons from 150+ icon sets including Tabler, Lucide, Material Design, and more. ## Prerequisites - The `figma-use` skill **MUST** be loaded before any `use_figma` tool call. Always invoke it first. - `fetch()` is **NOT available** inside `use_figma` code. All HTTP requests must happen **before** calling `use_figma`. - **Use `Bash(curl -s ...)` instead of `WebFetch`** to call the Iconify API. The Iconify API returns 403 for WebFetch requests but works with curl. ## Core Workflow ### Step 1: Fetch SVG via curl Use the `Bash` tool with `curl -s` to retrieve the SVG from the Iconify API: ```bash curl -s "https://api.iconify.design/{prefix}/{name}.svg" ``` **Example:** ```bash curl -s "https://api.iconify.design/tabler/alert-circle.svg" ``` This returns a raw SVG string ready for Figma insertion. > **Why curl?** The Iconify API returns HTTP 403 for `WebFetch` requests. Always use `Bash(curl -s ...)` instead. ### Step 2: Insert into Figma via use_figma Pass the fetched SVG string into a `use_figma` call using `figma.createNodeFromSvg()`: ```js // Paste the exact SVG string from Step 1 const svgString = `<svg xmlns="http://www.w3.org/2000/svg" ...>...</svg>`; const node = figma.createNodeFromSvg(svgString); // Name format: {LibraryName}