SVG Logo Designer — Claude Code skill: logos as SVG
Generates SVG logos from a brand description: several concepts, layouts and colour versions. Handy when a project needs a logo or an icon right now.
npx skills add rknall/claude-skills --skill svg-logo-designer -a claude-codeWhat SVG Logo Designer does
The skill walks the agent through phases. First it collects brand details — name, industry, audience, personality, competitors. Then it asks which logo type you want: wordmark, lettermark, pictorial mark, abstract mark, mascot, combination mark or emblem. Style, palette, fonts and technical constraints like size and placement come after that.
You get several concepts, and each one ships in multiple layouts: horizontal, vertical, square, icon only, text only. The SVG code uses viewBox, grouped elements, styles in defs and role/aria-labelledby attributes for accessibility. Files are saved with names like company-name-logo-concept1-horizontal.svg.
Expect a long round of questions before any code appears — skip the audience and style answers and the agent stalls. The skill suggests starting with 3–5 concepts, so one pass takes noticeably longer than tweaking an existing file.
What it helps with
- turn a written brand description into a logo
- get several logo concepts in one pass
- produce horizontal and vertical versions of the same mark
- prepare an icon for a favicon or avatar
- export a logo as SVG that scales without artefacts
Example prompts for the agent
- Create a logo for the project Northwind: minimalist, blue, icon plus wordmark
- Give me 3 logo concepts for a coffee shop, plus an icon-only version
- Make a monochrome version of this logo for a dark background
How to install SVG Logo Designer
1Skills CLI (Vercel)
npx skills add rknall/claude-skills --skill svg-logo-designer -a claude-code2Manually: put the files in place
~/.claude/skills/svg-logo-designer/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/svg-logo-designer/
1Skills CLI (Vercel)
npx skills add rknall/claude-skills --skill svg-logo-designer -a codex2Manually: put the files in place
.agents/skills/svg-logo-designer/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add rknall/claude-skills --skill svg-logo-designer -a cursor2Manually: put the files in place
.cursor/skills/svg-logo-designer/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install rknall/claude-skills svg-logo-designer2Manually: put the files in place
.github/skills/svg-logo-designer/SKILL.md1Skills CLI (Vercel)
npx skills add rknall/claude-skills --skill svg-logo-designer -a gemini-cli2Platform CLI
gemini skills install https://github.com/rknall/claude-skills --path svg-logo-designerManually: put the files in place
.devin/skills/svg-logo-designer/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add rknall/claude-skills --skill svg-logo-designer -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about SVG Logo Designer
How do I install SVG Logo Designer in Claude?
Run npx skills add rknall/claude-skills --skill svg-logo-designer -a claude-code. The skill lands in ~/.claude/skills/svg-logo-designer/SKILL.md.
What does SVG Logo Designer do?
It builds SVG logos from a description: gathers brand requirements, proposes several concepts and layouts, and writes optimised vector code.
How many logo concepts does it produce?
The skill suggests starting with 3–5 concepts, each in several layouts — horizontal, vertical, square, icon only and text only.
