Tool tree
Free SVG logo editor with WebMCP tools an AI agent can drive directly, built for the OpenAI WebMCP Challenge.
Implementation
gradeNot graded
gradeNot graded
send_feedbackSensitive Action
Sends feedback, a bug report, or a feature request to the allsvgicons team. If you notice a bug, broken behavior, or a UI problem on this page while completing a task, call this tool proactively to report it, even if the user did not ask you to. One-way, no reply comes back through this tool. If the user expects a reply, tell them to email hi@allsvgicons.com instead (mailto:hi@allsvgicons.com).
View tool JSON
{
"name": "send_feedback",
"kind": "transact",
"impl": "imperative",
"description": "Sends feedback, a bug report, or a feature request to the allsvgicons team. If you notice a bug, broken behavior, or a UI problem on this page while completing a task, call this tool proactively to report it, even if the user did not ask you to. One-way, no reply comes back through this tool. If the user expects a reply, tell them to email hi@allsvgicons.com instead (mailto:hi@allsvgicons.com).",
"inputSchema": {
"type": "object",
"properties": {
"message": {
"type": "string",
"description": "Feedback, bug report, or feature request to send to the allsvgicons team. Sent from this agent session, no context switch needed."
}
},
"required": [
"message"
]
}
}get_logo_maker_stateAnswer
Start here. Before designing, ask the human what they want: brand or product name, preferred colors, style (minimal, playful, bold, corporate), and any icon or symbol in mind. Do not guess these from nothing, and do not interrogate with a long fixed questionnaire either, just enough to design with intent. Then call this tool to read the current logo-maker canvas size, background, layers (with IDs and indices), selected layer, safe zone settings, available brands list, safeZoneViolations, lowContrastLayers (checked against the flat canvas background only, not other layers stacked underneath, so a low-contrast reading on a layer deliberately used as a cutout/notch against another layer is expected and can be ignored), share code, and share URL. Each layer's x/y is a 0-100 percentage of canvas width/height (50 is always center); it also includes a computed bounds field (width, height, left, top, right, bottom, centerX, centerY, rotation, all in canvas pixels, the pixel equivalent of x/y/scale) so you can check overlap or alignment against other layers or the canvas edges without converting yourself. Pass includeSvg: true to also receive the rendered SVG string, includeBrands: true for the full brand presets catalog (optionally narrowed with brandsQuery/brandsCategory), or includeTemplates: true for the built-in templates catalog.
View tool JSON
{
"name": "get_logo_maker_state",
"kind": "answer",
"impl": "imperative",
"description": "Start here. Before designing, ask the human what they want: brand or product name, preferred colors, style (minimal, playful, bold, corporate), and any icon or symbol in mind. Do not guess these from nothing, and do not interrogate with a long fixed questionnaire either, just enough to design with intent. Then call this tool to read the current logo-maker canvas size, background, layers (with IDs and indices), selected layer, safe zone settings, available brands list, safeZoneViolations, lowContrastLayers (checked against the flat canvas background only, not other layers stacked underneath, so a low-contrast reading on a layer deliberately used as a cutout/notch against another layer is expected and can be ignored), share code, and share URL. Each layer's x/y is a 0-100 percentage of canvas width/height (50 is always center); it also includes a computed bounds field (width, height, left, top, right, bottom, centerX, centerY, rotation, all in canvas pixels, the pixel equivalent of x/y/scale) so you can check overlap or alignment against other layers or the canvas edges without converting yourself. Pass includeSvg: true to also receive the rendered SVG string, includeBrands: true for the full brand presets catalog (optionally narrowed with brandsQuery/brandsCategory), or includeTemplates: true for the built-in templates catalog.",
"inputSchema": {
"type": "object",
"properties": {
"includeSvg": {
"type": "boolean",
"description": "Return exported SVG markup string in svg field."
},
"includeBrands": {
"type": "boolean",
"description": "Include the full brand presets catalog (id, name, category, colors, shape, defaultIcon) in a brands field. availableBrands (just the keys) is always included regardless."
},
"brandsQuery": {
"type": "string",
"description": "Optional keyword filter applied to the brands list when includeBrands is true (matches id, name, category, or defaultIcon)."
},
"brandsCategory": {
"type": "string",
"description": "Optional category filter applied to the brands list when includeBrands is true (e.g. \"social\", \"tech\", \"creative\", \"commerce\", \"entertainment\")."
},
"includeTemplates": {
"type": "boolean",
"description": "Include the built-in templates catalog (id, name, layerCount, shape, backgroundType) in a templates field."
},
"showDesignGrid": {
"type": "boolean",
"description": "Show/hide the Apple/iOS icon keyline alignment grid overlay."
}
}
}
}update_logo_maker_stateAction
Smart partial editor updates: modifies background, applies authentic brand presets' background/style only, no icon layer (e.g. "instagram", "facebook", "spotify", "stripe", "linear", "supabase"; see applyBrand's own description), toggles safe zone keylines, adds new layers, updates existing layers (by ID or 0-based index), removes layers, clears layers, randomizes the whole design, or updates selection without needing to re-send the whole state. updateLayers patches only the fields you send on the targeted layer: every other field, including fill/stroke colors, is left untouched; if a targeted update doesn't match any layer, it's listed in the response's unmatchedUpdates field instead of silently doing nothing, and an invalid enum value (e.g. fillType outside "solid"/"linear"/"radial", "gradient" is not a value) is reported in the response's fieldWarnings field instead of silently being dropped. Top-level args this tool doesn't recognize (e.g. sending get_logo_maker_state's "layers" array here instead of addLayers/updateLayers) are listed in the response's unrecognizedArgs field rather than silently no-opping. The response also includes safeZoneViolations and lowContrastLayers (same checks as get_logo_maker_state) so you can check and fix them without an extra round trip. This is the tool to use for toggling overwriteFill/overwriteStroke on or off without losing a previously set color, or any other incremental tweak; use replace_logo_maker_state only when loading a complete logo from scratch. For a gradient icon set fillType: "linear" or "radial" with fillStops (and overwriteFill: true) rather than writing customSvg. For a non-square shape (a band, a bar, a stretched mark) set scaleY on the layer instead of composing several layers. For a two-tone or four-colour block background set background.type: "split" with splitLayout and gradientColors. A centered layer's on-canvas footprint is roughly 200 * scale square; to stay inside the safe-zone circle (radius = canvasSize.width * safeZoneRatio / 2) a centered layer needs scale under (canvasSize.width * safeZoneRatio) / 283 (about 1.1 on the default 512px canvas at the default 0.611 ratio) — new layers default to scale 1.6, a bold full-bleed size that intentionally exceeds this, shrink it if safeZoneViolations flags it and a tight circular app-icon crop matters.
View tool JSON
{
"name": "update_logo_maker_state",
"kind": "act",
"impl": "imperative",
"description": "Smart partial editor updates: modifies background, applies authentic brand presets' background/style only, no icon layer (e.g. \"instagram\", \"facebook\", \"spotify\", \"stripe\", \"linear\", \"supabase\"; see applyBrand's own description), toggles safe zone keylines, adds new layers, updates existing layers (by ID or 0-based index), removes layers, clears layers, randomizes the whole design, or updates selection without needing to re-send the whole state. updateLayers patches only the fields you send on the targeted layer: every other field, including fill/stroke colors, is left untouched; if a targeted update doesn't match any layer, it's listed in the response's unmatchedUpdates field instead of silently doing nothing, and an invalid enum value (e.g. fillType outside \"solid\"/\"linear\"/\"radial\", \"gradient\" is not a value) is reported in the response's fieldWarnings field instead of silently being dropped. Top-level args this tool doesn't recognize (e.g. sending get_logo_maker_state's \"layers\" array here instead of addLayers/updateLayers) are listed in the response's unrecognizedArgs field rather than silently no-opping. The response also includes safeZoneViolations and lowContrastLayers (same checks as get_logo_maker_state) so you can check and fix them without an extra round trip. This is the tool to use for toggling overwriteFill/overwriteStroke on or off without losing a previously set color, or any other incremental tweak; use replace_logo_maker_state only when loading a complete logo from scratch. For a gradient icon set fillType: \"linear\" or \"radial\" with fillStops (and overwriteFill: true) rather than writing customSvg. For a non-square shape (a band, a bar, a stretched mark) set scaleY on the layer instead of composing several layers. For a two-tone or four-colour block background set background.type: \"split\" with splitLayout and gradientColors. A centered layer's on-canvas footprint is roughly 200 * scale square; to stay inside the safe-zone circle (radius = canvasSize.width * safeZoneRatio / 2) a centered layer needs scale under (canvasSize.width * safeZoneRatio) / 283 (about 1.1 on the default 512px canvas at the default 0.611 ratio) — new layers default to scale 1.6, a bold full-bleed size that intentionally exceeds this, shrink it if safeZoneViolations flags it and a tight circular app-icon crop matters.",
"inputSchema": {
"type": "object",
"properties": {
"canvasSize": {
"type": "object",
"description": "Partial canvas size update.",
"properties": {
"width": {
"type": "number",
"description": "Canvas width in pixels."
},
"height": {
"type": "number",
"description": "Canvas height in pixels."
}
}
},
"background": {
"type": "object",
"description": "Logo background configuration. Supported types: solid, gradient, radial, split.",
"properties": {
"type": {
"type": "string",
"enum": [
"solid",
"gradient",
"radial",
"split"
]
},
"splitLayout": {
"type": "string",
"enum": [
"halves",
"thirds",
"quadrant",
"pinwheel"
],
"description": "Hard-edged colour blocks, used when type is \"split\". Colours come from gradientColors (halves 2, thirds 3, quadrant and pinwheel 4, cycled if fewer). halves and thirds run left to right, or top to bottom when gradientDirection is \"to bottom\". quadrant order: top-left, top-right, bottom-right, bottom-left. pinwheel order: top, right, bottom, left. Use this instead of stacking oversized square layers."
},
"solidColor": {
"type": "string",
"description": "Hex or CSS color for solid background."
},
"gradientColors": {
"type": "array",
"items": {
"type": "string"
},
"description": "Array of colors for gradient/radial background."
},
"gradientPositions": {
"type": "array",
"items": {
"type": "number"
},
"description": "Array of stop percentages (0 to 100) for each color."
},
"gradientDirection": {
"type": "string",
"description": "CSS gradient direction, e.g. \"to right\", \"to bottom right\", \"to top\"."
},
"noise": {
"type": "number",
"description": "Noise texture intensity from 0 to 1."
},
"borderRadius": {
"type": "number",
"description": "Corner radius in pixels, clamped to >=0 (no fixed max). Only affects shape: \"rectangle\". Ignored when shape is \"circle\" or \"squircle\": those always use a full round/squircle clip regardless of this value."
},
"pattern": {
"type": "string",
"enum": [
"none",
"grid",
"dots",
"checker",
"lines",
"diagonal",
"circles",
"zigzag"
],
"description": "Pattern texture overlay."
},
"patternColor": {
"type": "string",
"description": "Pattern overlay color."
},
"patternOpacity": {
"type": "number",
"description": "Pattern overlay opacity (0 to 1)."
},
"shape": {
"type": "string",
"enum": [
"rectangle",
"circle",
"squircle"
],
"description": "Canvas clipping shape."
},
"radialCenterX": {
"type": "number",
"description": "Radial gradient center X % (0 to 100)."
},
"radialCenterY": {
"type": "number",
"description": "Radial gradient center Y % (0 to 100)."
},
"radialRadius": {
"type": "number",
"description": "Radial gradient radius % (0 to 100)."
},
"borderWidth": {
"type": "number",
"description": "Border outline width in pixels (0 to 24)."
},
"borderColor": {
"type": "string",
"description": "Border outline hex/CSS color."
},
"borderStyle": {
"type": "string",
"enum": [
"solid",
"dashed",
"dotted",
"double"
],
"description": "Border outline style."
}
}
},
"applyBrand": {
"type": "string",
"description": "Apply an authentic real-world brand preset's background/style only (color, gradient, shape, pattern, border radius) (e.g. \"instagram\", \"facebook\", \"spotify\", \"duolingo\", \"youtube\", \"whatsapp\", \"discord\", \"stripe\", \"linear\", \"supabase\", \"raycast\", \"netflix\", \"apple\", \"github\", \"google\", \"figma\", \"airbnb\", \"twitch\", \"slack\"). Does not add, remove, or recolor any icon layer, existing layers are left exactly as they are: follow it with updateLayers to set the icon/fill yourself, or use load_logo_maker_share's brand argument instead if you want the complete pre-built brand logo (background and matching icon layer) loaded in one step."
},
"showSafeZone": {
"type": "boolean",
"description": "Toggle Android & iOS app icon safe zone keylines overlay."
},
"showDesignGrid": {
"type": "boolean",
"description": "Show/hide the Apple/iOS icon keyline alignment grid overlay."
},
"safeZoneRatio": {
"type": "number",
"description": "Inner safe-zone circle diameter ratio (default 0.611, Android adaptive icons strict spec). Fixed outer guide at 75% is always shown alongside it."
},
"addLayers": {
"type": "array",
"description": "New layers to append on top of existing layers. Missing fields default to centered position and standard styles.",
"items": {
"type": "object",
"description": "Logo layer object.",
"properties": {
"id": {
"type": "string",
"description": "Optional layer ID (UUID generated if omitted)."
},
"iconName": {
"type": "string",
"description": "Icon identifier in pack:name format (e.g. \"lucide:sparkles\", \"solar:shield-bold\", \"ph:coffee-fill\")."
},
"url": {
"type": "string",
"description": "Direct SVG URL. If omitted, resolved from iconName."
},
"customSvg": {
"type": "string",
"description": "Raw SVG markup for a custom shape layer. When set, this overrides icon-based rendering for the layer: iconName still doubles as a label/identity. Pass an empty string to clear it back to icon-based rendering."
},
"x": {
"type": "number",
"description": "Horizontal position as a percentage (0-100) of canvas width, from the left edge. 50 is always center, on any canvas size. Omit to default to 50 (center)."
},
"y": {
"type": "number",
"description": "Vertical position as a percentage (0-100) of canvas height, from the top edge. 50 is always center, on any canvas size. Omit to default to 50 (center)."
},
"scale": {
"type": "number",
"description": "Scale multiplier: 1 draws the icon in a 200 px box on the canvas (default 1.6 = 320 px, canvas is 512 px). Check bounds in get_logo_maker_state after setting it."
},
"scaleY": {
"type": "number",
"description": "Vertical scale multiplier. Omit for a square box (same as scale). Use scale 3 and scaleY 0.4 for a colour band, for example. Pass null to go back to square."
},
"rotation": {
"type": "number",
"description": "Rotation angle in degrees (-180 to 180)."
},
"fill": {
"type": "string",
"description": "Fill hex/CSS color or \"none\"."
},
"fillType": {
"type": "string",
"enum": [
"solid",
"linear",
"radial"
],
"description": "Fill paint type. \"linear\" or \"radial\" use fillStops and ignore fill. Needs overwriteFill: true. Use this instead of customSvg for a gradient icon."
},
"fillStops": {
"type": "array",
"items": {
"type": "string"
},
"description": "Gradient colours in order (2 or more), e.g. [\"#ff6b6b\", \"#feca57\"]."
},
"fillPositions": {
"type": "array",
"items": {
"type": "number"
},
"description": "Stop offsets in percent, one per colour. Omit for evenly spaced."
},
"fillAngle": {
"type": "number",
"description": "Linear gradient angle in degrees, CSS convention: 0 = to top, 90 = to right (default)."
},
"stroke": {
"type": "string",
"description": "Stroke hex/CSS color or \"none\"."
},
"strokeWidth": {
"type": "number",
"description": "Stroke width override in pixels."
},
"strokeDasharray": {
"type": "string",
"description": "Stroke dash pattern, e.g. \"none\", \"6 4\", \"2 4\"."
},
"overwriteFill": {
"type": "boolean",
"description": "Force overwrite icon original fill. Only visible if the icon itself uses a fill paint: many icon packs (e.g. Lucide) are stroke-only outline icons where a fill override has no visible effect; if the color doesn't seem to apply, try overwriteStroke instead."
},
"overwriteStroke": {
"type": "boolean",
"description": "Force overwrite icon original stroke. Only visible if the icon itself uses a stroke paint: many icon packs are solid fill-only icons with no stroke where a stroke override has no visible effect; if the color doesn't seem to apply, try overwriteFill instead."
},
"opacity": {
"type": "number",
"description": "Layer opacity from 0 to 1."
},
"blendMode": {
"type": "string",
"enum": [
"normal",
"multiply",
"screen",
"overlay",
"darken",
"lighten",
"color-dodge",
"color-burn",
"hard-light",
"soft-light",
"difference",
"exclusion"
],
"description": "CSS mix-blend-mode for how this layer's pixels combine with what's beneath it."
},
"animationType": {
"type": "string",
"enum": [
"none",
"rotate",
"float",
"pulse",
"sway",
"custom"
],
"description": "[Experimental] Looping CSS animation for this layer. Niche feature, most logos should stay static: only set this when the user explicitly asks for motion."
},
"animationDuration": {
"type": "number",
"description": "Animation duration in seconds."
},
"animationTarget": {
"type": "string",
"description": "CSS selector matched against the icon's own SVG children (e.g. \"path:nth-of-type(2)\", \"circle\") to animate only that part instead of the whole icon. Omit to animate the whole icon."
},
"animationCustomKeyframes": {
"type": "string",
"description": "Raw CSS @keyframes stops body, without the @keyframes wrapper. Only used when animationType is \"custom\" (e.g. \"0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); }\")."
},
"visible": {
"type": "boolean",
"description": "Layer visibility."
},
"locked": {
"type": "boolean",
"description": "Lock layer from canvas drag/selection."
},
"shadowColor": {
"type": "string",
"description": "Drop shadow color."
},
"shadowBlur": {
"type": "number",
"description": "Drop shadow blur radius in pixels (0 for hard shadow)."
},
"shadowOffsetX": {
"type": "number",
"description": "Drop shadow horizontal offset."
},
"shadowOffsetY": {
"type": "number",
"description": "Drop shadow vertical offset."
},
"shadowOpacity": {
"type": "number",
"description": "Drop shadow opacity from 0 to 1."
}
},
"required": [
"iconName"
]
}
},
"updateLayers": {
"type": "array",
"description": "Modifications to existing layers (targeted by id or 0-based index).",
"items": {
"type": "object",
"description": "Partial layer updates. Match the target layer by id or 0-based index.",
"properties": {
"id": {
"type": "string",
"description": "Target layer ID."
},
"index": {
"type": "number",
"description": "Target layer 0-based index (0 = bottom-most layer)."
},
"iconName": {
"type": "string",
"description": "Replace icon with a new pack:icon name."
},
"url": {
"type": "string",
"description": "Direct SVG URL override."
},
"customSvg": {
"type": "string",
"description": "Raw SVG markup for a custom shape layer. When set, this overrides icon-based rendering for the layer: iconName still doubles as a label/identity. Pass an empty string to clear it back to icon-based rendering."
},
"x": {
"type": "number",
"description": "Horizontal position as a percentage (0-100) of canvas width, from the left edge. 50 is always center, on any canvas size. Omit to default to 50 (center)."
},
"y": {
"type": "number",
"description": "Vertical position as a percentage (0-100) of canvas height, from the top edge. 50 is always center, on any canvas size. Omit to default to 50 (center)."
},
"scale": {
"type": "number",
"description": "Scale multiplier: 1 draws the icon in a 200 px box on the canvas (canvas is 512 px)."
},
"scaleY": {
"type": "number",
"description": "Vertical scale multiplier. Omit for a square box (same as scale). Use scale 3 and scaleY 0.4 for a colour band, for example. Pass null to go back to square."
},
"rotation": {
"type": "number",
"description": "Rotation angle in degrees."
},
"fill": {
"type": "string",
"description": "Fill hex/CSS color or \"none\"."
},
"fillType": {
"type": "string",
"enum": [
"solid",
"linear",
"radial"
],
"description": "Fill paint type. \"linear\" or \"radial\" use fillStops and ignore fill. Needs overwriteFill: true. Use this instead of customSvg for a gradient icon."
},
"fillStops": {
"type": "array",
"items": {
"type": "string"
},
"description": "Gradient colours in order (2 or more), e.g. [\"#ff6b6b\", \"#feca57\"]."
},
"fillPositions": {
"type": "array",
"items": {
"type": "number"
},
"description": "Stop offsets in percent, one per colour. Omit for evenly spaced."
},
"fillAngle": {
"type": "number",
"description": "Linear gradient angle in degrees, CSS convention: 0 = to top, 90 = to right (default)."
},
"stroke": {
"type": "string",
"description": "Stroke hex/CSS color or \"none\"."
},
"strokeWidth": {
"type": "number",
"description": "Stroke width in pixels."
},
"strokeDasharray": {
"type": "string",
"description": "Stroke dash pattern, e.g. \"none\", \"6 4\", \"2 4\"."
},
"overwriteFill": {
"type": "boolean",
"description": "Force overwrite fill. Only visible if the icon itself uses a fill paint: many icon packs (e.g. Lucide) are stroke-only outline icons where a fill override has no visible effect; if the color doesn't seem to apply, try overwriteStroke instead."
},
"overwriteStroke": {
"type": "boolean",
"description": "Force overwrite stroke. Only visible if the icon itself uses a stroke paint: many icon packs are solid fill-only icons with no stroke where a stroke override has no visible effect; if the color doesn't seem to apply, try overwriteFill instead."
},
"opacity": {
"type": "number",
"description": "Opacity from 0 to 1."
},
"blendMode": {
"type": "string",
"enum": [
"normal",
"multiply",
"screen",
"overlay",
"darken",
"lighten",
"color-dodge",
"color-burn",
"hard-light",
"soft-light",
"difference",
"exclusion"
],
"description": "CSS mix-blend-mode for how this layer's pixels combine with what's beneath it."
},
"animationType": {
"type": "string",
"enum": [
"none",
"rotate",
"float",
"pulse",
"sway",
"custom"
],
"description": "[Experimental] Looping CSS animation for this layer. Niche feature, most logos should stay static: only set this when the user explicitly asks for motion."
},
"animationDuration": {
"type": "number",
"description": "Animation duration in seconds."
},
"animationTarget": {
"type": "string",
"description": "CSS selector matched against the icon's own SVG children (e.g. \"path:nth-of-type(2)\", \"circle\") to animate only that part instead of the whole icon. Omit to animate the whole icon."
},
"animationCustomKeyframes": {
"type": "string",
"description": "Raw CSS @keyframes stops body, without the @keyframes wrapper. Only used when animationType is \"custom\" (e.g. \"0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); }\"). Pass an empty string to clear it."
},
"visible": {
"type": "boolean",
"description": "Layer visibility."
},
"locked": {
"type": "boolean",
"description": "Layer lock status."
},
"shadowColor": {
"type": "string",
"description": "Drop shadow color."
},
"shadowBlur": {
"type": "number",
"description": "Drop shadow blur radius (0 for hard shadow)."
},
"shadowOffsetX": {
"type": "number",
"description": "Drop shadow X offset."
},
"shadowOffsetY": {
"type": "number",
"description": "Drop shadow Y offset."
},
"shadowOpacity": {
"type": "number",
"description": "Drop shadow opacity from 0 to 1."
}
}
}
},
"removeLayers": {
"type": "array",
"description": "Array of layer IDs or 0-based index strings to remove.",
"items": {
"type": "string"
}
},
"clearLayers": {
"type": "boolean",
"description": "If true, clears all current layers before applying addLayers."
},
"selectedLayerId": {
"type": "string",
"description": "Layer ID to select, or empty string / null to deselect all layers."
},
"randomize": {
"type": "boolean",
"description": "If true, replaces the current layers and background with a freshly randomized design (matched icon, palette, and shape). Overrides addLayers/updateLayers/removeLayers/clearLayers when both are present. Canvas size is left as-is."
},
"randomKeyword": {
"type": "string",
"description": "Optional theme keyword for randomize (e.g. \"tech\", \"nature\", \"star\", \"animal\", \"code\"). Ignored unless randomize is true."
},
"includeSvg": {
"type": "boolean",
"description": "If true, returns rendered SVG string in response."
}
}
}
}replace_logo_maker_stateAction
Replaces the entire editor contents with a structured logo state (canvasSize, background, and layers array) and returns a share code, share URL, safeZoneViolations, lowContrastLayers, and optional SVG. Full replace: any layer field you omit reverts to its default, it does not carry over from the current state. For any incremental edit (including toggling overwriteFill/overwriteStroke without losing the stored color) use update_logo_maker_state's updateLayers instead, which patches only the fields you send. Reserve this tool for loading a complete, fully-specified logo from scratch. For a gradient icon set fillType: "linear" or "radial" with fillStops (and overwriteFill: true) rather than writing customSvg.
View tool JSON
{
"name": "replace_logo_maker_state",
"kind": "act",
"impl": "imperative",
"description": "Replaces the entire editor contents with a structured logo state (canvasSize, background, and layers array) and returns a share code, share URL, safeZoneViolations, lowContrastLayers, and optional SVG. Full replace: any layer field you omit reverts to its default, it does not carry over from the current state. For any incremental edit (including toggling overwriteFill/overwriteStroke without losing the stored color) use update_logo_maker_state's updateLayers instead, which patches only the fields you send. Reserve this tool for loading a complete, fully-specified logo from scratch. For a gradient icon set fillType: \"linear\" or \"radial\" with fillStops (and overwriteFill: true) rather than writing customSvg.",
"inputSchema": {
"type": "object",
"properties": {
"canvasSize": {
"type": "object",
"properties": {
"width": {
"type": "number",
"description": "Canvas width in pixels."
},
"height": {
"type": "number",
"description": "Canvas height in pixels."
}
}
},
"background": {
"type": "object",
"description": "Logo background configuration. Supported types: solid, gradient, radial, split.",
"properties": {
"type": {
"type": "string",
"enum": [
"solid",
"gradient",
"radial",
"split"
]
},
"splitLayout": {
"type": "string",
"enum": [
"halves",
"thirds",
"quadrant",
"pinwheel"
],
"description": "Hard-edged colour blocks, used when type is \"split\". Colours come from gradientColors (halves 2, thirds 3, quadrant and pinwheel 4, cycled if fewer). halves and thirds run left to right, or top to bottom when gradientDirection is \"to bottom\". quadrant order: top-left, top-right, bottom-right, bottom-left. pinwheel order: top, right, bottom, left. Use this instead of stacking oversized square layers."
},
"solidColor": {
"type": "string",
"description": "Hex or CSS color for solid background."
},
"gradientColors": {
"type": "array",
"items": {
"type": "string"
},
"description": "Array of colors for gradient/radial background."
},
"gradientPositions": {
"type": "array",
"items": {
"type": "number"
},
"description": "Array of stop percentages (0 to 100) for each color."
},
"gradientDirection": {
"type": "string",
"description": "CSS gradient direction, e.g. \"to right\", \"to bottom right\", \"to top\"."
},
"noise": {
"type": "number",
"description": "Noise texture intensity from 0 to 1."
},
"borderRadius": {
"type": "number",
"description": "Corner radius in pixels, clamped to >=0 (no fixed max). Only affects shape: \"rectangle\". Ignored when shape is \"circle\" or \"squircle\": those always use a full round/squircle clip regardless of this value."
},
"pattern": {
"type": "string",
"enum": [
"none",
"grid",
"dots",
"checker",
"lines",
"diagonal",
"circles",
"zigzag"
],
"description": "Pattern texture overlay."
},
"patternColor": {
"type": "string",
"description": "Pattern overlay color."
},
"patternOpacity": {
"type": "number",
"description": "Pattern overlay opacity (0 to 1)."
},
"shape": {
"type": "string",
"enum": [
"rectangle",
"circle",
"squircle"
],
"description": "Canvas clipping shape."
},
"radialCenterX": {
"type": "number",
"description": "Radial gradient center X % (0 to 100)."
},
"radialCenterY": {
"type": "number",
"description": "Radial gradient center Y % (0 to 100)."
},
"radialRadius": {
"type": "number",
"description": "Radial gradient radius % (0 to 100)."
},
"borderWidth": {
"type": "number",
"description": "Border outline width in pixels (0 to 24)."
},
"borderColor": {
"type": "string",
"description": "Border outline hex/CSS color."
},
"borderStyle": {
"type": "string",
"enum": [
"solid",
"dashed",
"dotted",
"double"
],
"description": "Border outline style."
}
}
},
"layers": {
"type": "array",
"description": "Logo layers, bottom layer first.",
"items": {
"type": "object",
"description": "Logo layer object.",
"properties": {
"id": {
"type": "string",
"description": "Optional layer ID (UUID generated if omitted)."
},
"iconName": {
"type": "string",
"description": "Icon identifier in pack:name format (e.g. \"lucide:sparkles\", \"solar:shield-bold\", \"ph:coffee-fill\")."
},
"url": {
"type": "string",
"description": "Direct SVG URL. If omitted, resolved from iconName."
},
"customSvg": {
"type": "string",
"description": "Raw SVG markup for a custom shape layer. When set, this overrides icon-based rendering for the layer: iconName still doubles as a label/identity. Pass an empty string to clear it back to icon-based rendering."
},
"x": {
"type": "number",
"description": "Horizontal position as a percentage (0-100) of canvas width, from the left edge. 50 is always center, on any canvas size. Omit to default to 50 (center)."
},
"y": {
"type": "number",
"description": "Vertical position as a percentage (0-100) of canvas height, from the top edge. 50 is always center, on any canvas size. Omit to default to 50 (center)."
},
"scale": {
"type": "number",
"description": "Scale multiplier: 1 draws the icon in a 200 px box on the canvas (default 1.6 = 320 px, canvas is 512 px). Check bounds in get_logo_maker_state after setting it."
},
"scaleY": {
"type": "number",
"description": "Vertical scale multiplier. Omit for a square box (same as scale). Use scale 3 and scaleY 0.4 for a colour band, for example. Pass null to go back to square."
},
"rotation": {
"type": "number",
"description": "Rotation angle in degrees (-180 to 180)."
},
"fill": {
"type": "string",
"description": "Fill hex/CSS color or \"none\"."
},
"fillType": {
"type": "string",
"enum": [
"solid",
"linear",
"radial"
],
"description": "Fill paint type. \"linear\" or \"radial\" use fillStops and ignore fill. Needs overwriteFill: true. Use this instead of customSvg for a gradient icon."
},
"fillStops": {
"type": "array",
"items": {
"type": "string"
},
"description": "Gradient colours in order (2 or more), e.g. [\"#ff6b6b\", \"#feca57\"]."
},
"fillPositions": {
"type": "array",
"items": {
"type": "number"
},
"description": "Stop offsets in percent, one per colour. Omit for evenly spaced."
},
"fillAngle": {
"type": "number",
"description": "Linear gradient angle in degrees, CSS convention: 0 = to top, 90 = to right (default)."
},
"stroke": {
"type": "string",
"description": "Stroke hex/CSS color or \"none\"."
},
"strokeWidth": {
"type": "number",
"description": "Stroke width override in pixels."
},
"strokeDasharray": {
"type": "string",
"description": "Stroke dash pattern, e.g. \"none\", \"6 4\", \"2 4\"."
},
"overwriteFill": {
"type": "boolean",
"description": "Force overwrite icon original fill. Only visible if the icon itself uses a fill paint: many icon packs (e.g. Lucide) are stroke-only outline icons where a fill override has no visible effect; if the color doesn't seem to apply, try overwriteStroke instead."
},
"overwriteStroke": {
"type": "boolean",
"description": "Force overwrite icon original stroke. Only visible if the icon itself uses a stroke paint: many icon packs are solid fill-only icons with no stroke where a stroke override has no visible effect; if the color doesn't seem to apply, try overwriteFill instead."
},
"opacity": {
"type": "number",
"description": "Layer opacity from 0 to 1."
},
"blendMode": {
"type": "string",
"enum": [
"normal",
"multiply",
"screen",
"overlay",
"darken",
"lighten",
"color-dodge",
"color-burn",
"hard-light",
"soft-light",
"difference",
"exclusion"
],
"description": "CSS mix-blend-mode for how this layer's pixels combine with what's beneath it."
},
"animationType": {
"type": "string",
"enum": [
"none",
"rotate",
"float",
"pulse",
"sway",
"custom"
],
"description": "[Experimental] Looping CSS animation for this layer. Niche feature, most logos should stay static: only set this when the user explicitly asks for motion."
},
"animationDuration": {
"type": "number",
"description": "Animation duration in seconds."
},
"animationTarget": {
"type": "string",
"description": "CSS selector matched against the icon's own SVG children (e.g. \"path:nth-of-type(2)\", \"circle\") to animate only that part instead of the whole icon. Omit to animate the whole icon."
},
"animationCustomKeyframes": {
"type": "string",
"description": "Raw CSS @keyframes stops body, without the @keyframes wrapper. Only used when animationType is \"custom\" (e.g. \"0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); }\")."
},
"visible": {
"type": "boolean",
"description": "Layer visibility."
},
"locked": {
"type": "boolean",
"description": "Lock layer from canvas drag/selection."
},
"shadowColor": {
"type": "string",
"description": "Drop shadow color."
},
"shadowBlur": {
"type": "number",
"description": "Drop shadow blur radius in pixels (0 for hard shadow)."
},
"shadowOffsetX": {
"type": "number",
"description": "Drop shadow horizontal offset."
},
"shadowOffsetY": {
"type": "number",
"description": "Drop shadow vertical offset."
},
"shadowOpacity": {
"type": "number",
"description": "Drop shadow opacity from 0 to 1."
}
},
"required": [
"iconName"
]
}
},
"showSafeZone": {
"type": "boolean",
"description": "Show/hide Android & iOS app icon safe zone keyline overlay."
},
"showDesignGrid": {
"type": "boolean",
"description": "Show/hide the Apple/iOS icon keyline alignment grid overlay."
},
"safeZoneRatio": {
"type": "number",
"description": "Inner safe-zone circle diameter ratio: the area critical icon details must stay within to survive any launcher mask (default 0.611, Android adaptive icons strict spec). A fixed outer guide at 75% (practical logo extent) is always shown alongside it."
},
"includeSvg": {
"type": "boolean",
"description": "Return exported SVG markup in response."
}
},
"required": [
"layers"
]
}
}search_logo_iconsAnswer
Searches across 200,000+ SVG icons for keywords to find valid icon names (in pack:name format) suitable for logo marks.
View tool JSON
{
"name": "search_logo_icons",
"kind": "answer",
"impl": "imperative",
"description": "Searches across 200,000+ SVG icons for keywords to find valid icon names (in pack:name format) suitable for logo marks.",
"inputSchema": {
"type": "object",
"properties": {
"query": {
"type": "string",
"description": "Keyword to search for icons (e.g. \"rocket\", \"shield\", \"leaf\", \"sparkles\", \"bolt\")."
},
"pack": {
"type": "string",
"description": "Optional Iconify pack prefix filter (e.g. \"lucide\", \"solar\", \"tabler\", \"mingcute\", \"ph\", \"material-symbols\")."
},
"limit": {
"type": "number",
"description": "Maximum number of icon names to return (default 24, max 100)."
}
},
"required": [
"query"
]
}
}suggest_logo_iconsAnswer
Returns ready-to-apply candidate logos (one curated icon each, paired with a brand-grade palette and shape) the same way the UI's "Generate"/"Shuffle" panel does. Read-only: it does not change the canvas. To apply a candidate, pass its exact layers, background, and canvasSize to replace_logo_maker_state.
View tool JSON
{
"name": "suggest_logo_icons",
"kind": "answer",
"impl": "imperative",
"description": "Returns ready-to-apply candidate logos (one curated icon each, paired with a brand-grade palette and shape) the same way the UI's \"Generate\"/\"Shuffle\" panel does. Read-only: it does not change the canvas. To apply a candidate, pass its exact layers, background, and canvasSize to replace_logo_maker_state.",
"inputSchema": {
"type": "object",
"properties": {
"keyword": {
"type": "string",
"description": "Optional theme keyword (e.g. \"coffee\", \"fitness\", \"tech\") to bias suggestions toward. Omit for a shuffle of the curated all-purpose icon pool, matching the UI's \"Shuffle\" button."
},
"count": {
"type": "number",
"description": "Number of candidates to return (default 6, max 12)."
}
}
}
}load_logo_maker_shareAction
Loads a complete logo into the editor from an authentic brand preset (e.g. "instagram", "facebook", "spotify", "stripe", "supabase", "linear"), a built-in template ID, an asl1. share code, or a full ?logo= URL: always replaces the current canvas. For the catalog of available brands or templates (a read, not an action), use get_logo_maker_state's includeBrands/includeTemplates instead. For a randomized design, use update_logo_maker_state's randomize flag.
View tool JSON
{
"name": "load_logo_maker_share",
"kind": "act",
"impl": "imperative",
"description": "Loads a complete logo into the editor from an authentic brand preset (e.g. \"instagram\", \"facebook\", \"spotify\", \"stripe\", \"supabase\", \"linear\"), a built-in template ID, an asl1. share code, or a full ?logo= URL: always replaces the current canvas. For the catalog of available brands or templates (a read, not an action), use get_logo_maker_state's includeBrands/includeTemplates instead. For a randomized design, use update_logo_maker_state's randomize flag.",
"inputSchema": {
"type": "object",
"properties": {
"logo": {
"type": "string",
"description": "An asl1. share code or a URL containing ?logo=asl1..."
},
"brand": {
"type": "string",
"description": "Load an authentic brand preset starting point (e.g. \"instagram\", \"facebook\", \"spotify\", \"duolingo\", \"youtube\", \"whatsapp\", \"discord\", \"stripe\", \"linear\", \"supabase\", \"raycast\", \"netflix\", \"apple\", \"github\", \"google\", \"figma\", \"airbnb\", \"twitch\", \"slack\")."
},
"templateId": {
"type": "string",
"description": "Built-in template ID to load (e.g. \"instagram-sunset\", \"facebook-brand\", \"spotify-neon\", \"supabase-emerald\", \"stripe-violet\", \"linear-obsidian\", \"modern-lightning\", \"blueprint-grid\", \"app-icon-squircle\", \"eco-friendly\")."
},
"includeSvg": {
"type": "boolean",
"description": "If true, returns rendered SVG string in response."
}
}
}
}get_logo_previewAnswer
Renders the current canvas so an agent can check its own composition without a manual export round-trip. format: "svg" returns the exact SVG markup (same generator as includeSvg elsewhere). format: "png" rasterizes it client-side to a small (max 256px) PNG data URI: a cheap sanity check, not a hi-res export.
View tool JSON
{
"name": "get_logo_preview",
"kind": "answer",
"impl": "imperative",
"description": "Renders the current canvas so an agent can check its own composition without a manual export round-trip. format: \"svg\" returns the exact SVG markup (same generator as includeSvg elsewhere). format: \"png\" rasterizes it client-side to a small (max 256px) PNG data URI: a cheap sanity check, not a hi-res export.",
"inputSchema": {
"type": "object",
"properties": {
"format": {
"type": "string",
"enum": [
"svg",
"png"
],
"description": "\"svg\" returns the rendered SVG markup. \"png\" rasterizes it client-side to a small (max 256px) PNG data URI: a cheap \"see your own work\" check, not a hi-res export (use the human Export panel for that)."
}
},
"required": [
"format"
]
}
}manage_saved_logosAction
Reads and writes the "My logos" list (the same browser-local list the human Save/My-logos UI uses). action: "list" returns saved entries (id, code, savedAt, iconName, thumb). action: "load" replaces the current editor state with a saved entry by id. action: "save" saves the current editor state as a new entry, so agent-built logos show up in the human "My logos" panel too. action: "delete" removes a saved entry by id.
View tool JSON
{
"name": "manage_saved_logos",
"kind": "act",
"impl": "imperative",
"description": "Reads and writes the \"My logos\" list (the same browser-local list the human Save/My-logos UI uses). action: \"list\" returns saved entries (id, code, savedAt, iconName, thumb). action: \"load\" replaces the current editor state with a saved entry by id. action: \"save\" saves the current editor state as a new entry, so agent-built logos show up in the human \"My logos\" panel too. action: \"delete\" removes a saved entry by id.",
"inputSchema": {
"type": "object",
"properties": {
"action": {
"type": "string",
"enum": [
"list",
"load",
"save",
"delete"
],
"description": "\"list\" returns the saved logos in this browser's \"My logos\" panel. \"load\" replaces the current editor state with a saved logo by id (requires id). \"save\" saves the current editor state as a new saved logo, visible in the human \"My logos\" panel too. \"delete\" removes a saved logo by id (requires id)."
},
"id": {
"type": "string",
"description": "Saved logo ID. Required for action \"load\" and \"delete\"."
}
},
"required": [
"action"
]
}
}