# SVG Logo Designer

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.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 8200 installs · ★ 86
- Author: rknall
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/rknall/claude-skills/tree/HEAD/svg-logo-designer/SKILL.md
- Updated: 2025-10-20
- HTML: https://affpapa.org/en/nevibecode/skills/svg-logo-designer

## What it 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.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add rknall/claude-skills --skill svg-logo-designer -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/svg-logo-designer/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/svg-logo-designer/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add rknall/claude-skills --skill svg-logo-designer -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/svg-logo-designer/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add rknall/claude-skills --skill svg-logo-designer -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/svg-logo-designer/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install rknall/claude-skills svg-logo-designer
```

2. **Manually: put the files in place**
- File: `.github/skills/svg-logo-designer/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add rknall/claude-skills --skill svg-logo-designer -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/rknall/claude-skills --path svg-logo-designer
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/svg-logo-designer/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add rknall/claude-skills --skill svg-logo-designer -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/rknall/claude-skills/tree/HEAD/svg-logo-designer/SKILL.md

## When to use it
- 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
- 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

## Similar
- [logo-designer](https://affpapa.org/en/nevibecode/skills/logo-designer.md) — skill · 931 installs
- [logo-generator](https://affpapa.org/en/nevibecode/skills/logo-generator.md) — skill · 3900 installs
- [logo-design](https://affpapa.org/en/nevibecode/skills/logo-design.md) — skill · 1100 installs
- [animated-readme-logo](https://affpapa.org/en/nevibecode/skills/animated-readme-logo.md) — skill · 2700 installs
- [logo-animation](https://affpapa.org/en/nevibecode/skills/logo-animation.md) — skill · 2800 installs
- [svg-icon-generator](https://affpapa.org/en/nevibecode/skills/svg-icon-generator.md) — skill · 1300 installs

From the same set: [rknall/claude-skills](https://affpapa.org/en/nevibecode/by/rknall/claude-skills.md) — 4 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md