From figma-logos-svgl
Use when working with Figma and UI icons are needed — triggers on icon names, icon libraries (Tabler, Lucide, Material Design, Phosphor, Heroicons), or requests to add/insert icons in Figma designs.
How this skill is triggered — by the user, by Claude, or both
Slash command
/figma-logos-svgl:figma-icons-iconifyThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
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.
Fetch real, pixel-perfect SVG icons from the Iconify API 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.
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.Bash(curl -s ...) instead of WebFetch to call the Iconify API. The Iconify API returns 403 for WebFetch requests but works with curl.Use the Bash tool with curl -s to retrieve the SVG from the Iconify API:
curl -s "https://api.iconify.design/{prefix}/{name}.svg"
Example:
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
WebFetchrequests. Always useBash(curl -s ...)instead.
Pass the fetched SVG string into a use_figma call using figma.createNodeFromSvg():
// 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}/{icon-name} for easy identification
node.name = "Tabler/alert-circle";
// Resize while preserving aspect ratio.
// Most Iconify icons are square (24x24), but some are not — always check.
const originalWidth = node.width;
const originalHeight = node.height;
const targetHeight = 24; // desired height
const targetWidth = targetHeight * (originalWidth / originalHeight);
node.resize(targetWidth, targetHeight);
// Append to target frame (replace TARGET_ID with actual node ID)
const target = figma.getNodeById("TARGET_ID");
target.appendChild(node);
return { createdNodeIds: [node.id] };
Important: figma.createNodeFromSvg() returns a FrameNode containing the vector paths. You can resize, rename, reposition, and reparent it like any other frame.
Customize the fetched SVG by appending query parameters:
| Parameter | Description | Example |
|---|---|---|
color | Set icon color (URL-encode #) | ?color=%23ff0000 |
width | Icon width in pixels | ?width=32 |
height | Icon height in pixels | ?height=32 |
flip | Flip direction | ?flip=horizontal |
rotate | Rotation angle | ?rotate=90deg |
Example with parameters:
https://api.iconify.design/tabler/alert-circle.svg?width=24&height=24&color=%230f172a
When the user does not specify an exact icon name, search using the Iconify search endpoint:
curl -s "https://api.iconify.design/search?query={term}&prefixes={prefix}&limit=10"
Example:
curl -s "https://api.iconify.design/search?query=alert&prefixes=tabler&limit=10"
This returns JSON with matching icon names:
{
"icons": [
"tabler:alert-circle",
"tabler:alert-triangle",
"tabler:alert-octagon"
],
"total": 15
}
Pick the best match and proceed with Step 1 and Step 2 of the core workflow.
When inserting multiple icons, use the JSON endpoint to fetch them all in one request:
curl -s "https://api.iconify.design/{prefix}.json?icons={name1},{name2},{name3}"
Example:
curl -s "https://api.iconify.design/tabler.json?icons=alert-circle,home,settings"
This returns structured data:
{
"prefix": "tabler",
"icons": {
"alert-circle": {
"body": "<path d=\"...\"/>",
"width": 24,
"height": 24
}
}
}
To use each icon, extract the data and wrap the body in an SVG element:
// Extract icon data from the JSON response
const icon = response.icons["alert-circle"];
const { body } = icon;
const width = icon.width || 24;
const height = icon.height || 24;
const svgString = `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">${body}</svg>`;
const node = figma.createNodeFromSvg(svgString);
Note: Check the icon set's default attributes. Tabler icons use stroke="currentColor" stroke-width="2". Material Design icons use fill="currentColor". Match the icon set's style when wrapping the body.
| Prefix | Icon Set | Style | Default Attributes |
|---|---|---|---|
tabler | Tabler Icons | Stroke | stroke="currentColor" stroke-width="2" |
lucide | Lucide | Stroke | stroke="currentColor" stroke-width="2" |
mdi | Material Design Icons | Fill | fill="currentColor" |
ph | Phosphor Icons | Stroke/Fill | varies by weight |
ri | Remix Icon | Fill | fill="currentColor" |
heroicons | Heroicons | Stroke | stroke="currentColor" stroke-width="1.5" |
solar | Solar Icons | Stroke/Fill | varies by style |
iconamoon | IconaMoon | Stroke | stroke="currentColor" |
If you need to change the icon color after inserting into Figma, traverse the node's children and update fills or strokes:
const iconNode = figma.getNodeById("ICON_NODE_ID");
function recolor(node, color) {
if ("fills" in node && node.fills.length > 0) {
node.fills = [{ type: "SOLID", color }];
}
if ("strokes" in node && node.strokes.length > 0) {
node.strokes = [{ type: "SOLID", color }];
}
if ("children" in node) {
for (const child of node.children) {
recolor(child, color);
}
}
}
// Color values are 0-1 range (not 0-255)
recolor(iconNode, { r: 0.09, g: 0.09, b: 0.09 });
return { mutatedNodeIds: [iconNode.id] };
figma.createNodeFromSvg() fails: Some SVGs may contain unsupported features. Try fetching with explicit ?width=24&height=24 parameters, or use the JSON endpoint and wrap the body manually.fetch() inside use_figma — it does not exist in the Figma Plugin API sandbox. Always fetch SVG via Bash(curl -s ...) before the use_figma call. Do NOT use WebFetch — the Iconify API returns 403 for it.figma-use skill before making any use_figma tool call.use_figma calls for subsequent operations.{LibraryName}/{icon-name} (e.g., Tabler/alert-circle, Lucide/home, MDI/settings). This makes icons identifiable by their source library in the Figma layers panel.node.width and node.height after createNodeFromSvg().npx claudepluginhub douinc/agent-skills --plugin writing-project-readmeCreates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.