SVGL Logos for Figma

Fetch real brand and product SVG logos from the SVGL API and insert them into Figma designs. Never draw logos manually — always use this workflow to get accurate logos from a curated collection of 500+ brand SVGs.

SVGL vs Iconify: Use this skill for brand/product logos (React, Vercel, Stripe, GitHub). Use figma-icons-iconify for UI icons (arrows, alerts, settings).

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 SVGL API. The SVGL API may return 403 for WebFetch requests but works with curl.

Core Workflow

Step 1: Search for the Logo

Use the SVGL search endpoint to find the logo:

curl -s "https://api.svgl.app?search={name}"

Example:

curl -s "https://api.svgl.app?search=react"

This returns a JSON array. Each item has a route field which is either:

• A string — single SVG URL (e.g., "https://svgl.app/library/preact.svg")
• A theme object — with light and dark variants:

  {
    "light": "https://svgl.app/library/react_light.svg",
    "dark": "https://svgl.app/library/react_dark.svg"
  }

Pick the matching result by title, then choose the appropriate variant (light/dark) based on the design context.

Note: The category field can be a string ("Software") or an array (["Software", "Privacy"]). Handle both types when filtering by category.

Step 2: Fetch the SVG Content

Fetch the raw SVG using the URL from Step 1:

curl -s "https://svgl.app/library/{filename}.svg"

Example:

curl -s "https://svgl.app/library/react_dark.svg"

Step 3: Insert into Figma via use_figma

Pass the fetched SVG string into a use_figma call using figma.createNodeFromSvg():

// Paste the exact SVG string from Step 2
const svgString = `<svg xmlns="http://www.w3.org/2000/svg" ...>...</svg>`;

const node = figma.createNodeFromSvg(svgString);
// Name format: SVGL/{logo-name} for easy identification
node.name = "SVGL/React";

// IMPORTANT: Preserve aspect ratio when resizing.
// Extract original dimensions from the created node, then scale proportionally.
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] };

Aspect ratio is critical. Brand logos are rarely square (e.g., Nuxt is 256x168). Always calculate proportional dimensions from the original SVG width/height. Never force a square resize like node.resize(16, 16) unless the original SVG is square.

API Endpoints

Handling Light/Dark Variants

Many logos have separate light and dark versions. Check the route field type:

# Search result with theme variants:
# { "title": "React", "route": { "light": "...react_light.svg", "dark": "...react_dark.svg" } }

# For dark backgrounds → use the dark variant
curl -s "https://svgl.app/library/react_dark.svg"

# For light backgrounds → use the light variant
curl -s "https://svgl.app/library/react_light.svg"

When unsure which variant to use: default to the light variant, or check the target frame's background color.

Wordmarks

Some logos also have wordmark versions (logo with text). These are in the wordmark field:

{
  "title": "React",
  "route": { "light": "...react_light.svg", "dark": "...react_dark.svg" },
  "wordmark": {
    "light": "...react-wordmark-light.svg",
    "dark": "...react-wordmark-dark.svg"
  }
}

Use the wordmark URL when the user requests a logo with text or a full brand mark.

Recoloring After Insertion

If you need to change the logo color after inserting into Figma, traverse the node's children and update fills:

const logoNode = figma.getNodeById("LOGO_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(logoNode, { r: 1, g: 1, b: 1 });

return { mutatedNodeIds: [logoNode.id] };

Handling Errors

• Empty search results: If curl -s "https://api.svgl.app?search={name}" returns [], the logo is not in SVGL. Try alternative names or check spelling.
• 404 from SVG URL: The route URL is broken or outdated. Re-search to get the latest URL.
• figma.createNodeFromSvg() fails: Strip the <?xml ...?> declaration from the SVG string and retry. Some SVGL SVGs include XML preambles that can cause issues.

Constraints

1. NEVER draw logos manually with vector paths, shapes, or text when the logo is available on SVGL.
2. NEVER use 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.
3. Always load the figma-use skill before making any use_figma tool call.
4. Always return created node IDs from use_figma calls for subsequent operations.
5. Name logo nodes as SVGL/{LogoName} (e.g., SVGL/React, SVGL/Vercel, SVGL/GitHub). This makes logos identifiable by their source in the Figma layers panel.
6. Respect light/dark variants — choose the appropriate variant based on the design's background color.
7. SVG may contain <?xml ...?> declaration — figma.createNodeFromSvg() handles this, but if it fails, strip the XML declaration before passing to Figma.
8. NEVER force-resize to a square. Always preserve the original SVG aspect ratio. Calculate proportional width/height from node.width and node.height after createNodeFromSvg(), then resize with node.resize(targetHeight * (node.width / node.height), targetHeight).