{"id":"54a0e8fd-5d8f-4e51-9455-998b501e2780","slug":"pro-icons-skill","kind":"skill","name":"pro-icons-skill","summary":"Claude skill and Claude Code plugin: 180+ tech and brand logo tiles in 3 themes, with scripts for README tech-stack banners, slide-ready PNGs and animated intros.","owner":"Hirusha-Nikson","repoUrl":"https://github.com/Hirusha-Nikson/pro-icons-skill","license":"MIT","licenseTier":"permissive","trust":"community","stars":0,"match":null,"fewStars":true,"format":"skill","createdAt":"2026-10-10T06:51:55.000Z","addedAt":"2026-10-21T10:31:05.147Z","logoUrl":"https://avatars.githubusercontent.com/u/138320982?u=4ebecdce7682ac99723415323ed5a5bbc2a971b6&v=4","linkOnly":false,"collection":null,"skillPath":null,"categories":["developer-tools","design-media"],"tags":["claude","claude-ai","claude-code","claude-code-plugin","claude-desktop","claude-plugin","developer-tools","github-readme"],"runtime":"binary","local":true,"cloudCapable":false,"cloudCapability":"unknown","cloudReadyOnPlatform":false,"needsApiKey":false,"reviewed":false,"syncedAt":"2026-10-22T16:46:04.959Z","sample":false,"url":"https://conduits.dev/tools/pro-icons-skill","language":"HTML","transports":["stdio"],"install":{},"requirements":{"env":[],"upstreamMayCharge":false},"tools":null,"readme":"\n\n# dev-icons\n\nA skill that gives Claude about 190 tech and brand logos (languages, frameworks, cloud,\ndatabases, DevOps, AI tools and more) as ready-made tiles, plus scripts to turn them into\ntech-stack banners, slide-ready PNGs and animated intros.\n\n\n\n**[Website: search all 189 icons and build your stack โ](https://hirusha-nikson.github.io/pro-icons-skill/)** ยท [Icon gallery on GitHub](gallery/README.md)\n\n## What you can ask Claude\n\nOnce the skill is installed, ask in plain language. Claude looks up the icons, runs the\nright script and gives you the file.\n\n- \"Make a tech stack banner for my README: React, TypeScript, Node and Postgres.\"\n- \"I need Docker, Kubernetes and Terraform logos as PNGs for my slides.\"\n- \"Create an animated intro showing Python, FastAPI and Redis for my video.\"\n- \"Add a skills section with my stack to my portfolio site.\"\n\n## Features\n\n- **3 themes:** `dark` (the familiar dark tile), `light`, and `brand` (filled with the brand colour).\n Logo colours switch automatically when they'd be hard to see, such as black logos on dark tiles.\n- **Banners and grids:** any set of icons in one SVG or PNG, with your choice of size, spacing and row length.\n- **Single files:** SVG, or PNG at any size, ready for slides, documents and websites.\n- **Animated HTML:** 4 styles (pop, slide, float, wave), ready to screen-record into a video.\n- **Forgiving names:** `k8s`, `postgres`, `Next.js` and `node` all work, and typos get a \"did you mean\".\n- **Works offline:** everything is inside the skill. Nothing is downloaded when it runs.\n- **Licence-aware:** Claude warns you when a logo has a restrictive licence (for example, non-commercial only).\n\n## Install\n\n### claude.ai\n\nYou need **Code execution and file creation** turned on in Settings. Plugins need a paid\nplan (Pro, Max, Team or Enterprise).\n\n1. Open **Customize** in the left sidebar and go to the **Plugins** tab.\n2. Click **Add**, choose **Add marketplace**, and under **Add from a repository** enter\n `Hirusha-Nikson/pro-icons-skill`.\n3. Open the **Discover** tab, find **Dev Icons** and click **Add**, then start a new chat.\n\n\nHaving trouble adding the plugin? Upload the skill instead.
\n\n1. Download **[dev-icons.zip](https://github.com/Hirusha-Nikson/pro-icons-skill/releases/latest/download/dev-icons.zip)**\n from the latest release.\n2. In claude.ai, go to **Settings โ Capabilities โ Skills**, click **Upload skill** and\n choose `dev-icons.zip`.\n3. Make sure the skill is switched on, then start a new chat.\n\n \n\n### Claude Code\n\nInstall it as a plugin.\n\n**In the VS Code extension:**\n\n1. In the Claude Code chat box, type `/plugins` (with an **s**) and press Enter.\n The **Manage plugins** dialog opens.\n2. Go to the **Marketplaces** tab, enter `Hirusha-Nikson/pro-icons-skill` and add it.\n It shows up as **pro-icons**.\n3. Switch to the **Plugins** tab, find **Dev Icons** (`dev-icons`) and click **Install**.\n4. Choose the scope that installs it for you in all your projects, not\n **Install locally**, which only covers the current repository.\n\nOr paste this link into your browser to open VS Code straight at the install screen:\n\n```\nvscode://anthropic.claude-code/install-plugin?plugin=dev-icons&marketplace=Hirusha-Nikson/pro-icons-skill\n```\n\n**In Claude Code in a terminal,** run these in a session:\n\n```\n/plugin marketplace add Hirusha-Nikson/pro-icons-skill\n/plugin install dev-icons@pro-icons\n```\n\nOr from your shell:\n\n```bash\nclaude plugin marketplace add Hirusha-Nikson/pro-icons-skill\nclaude plugin install dev-icons@pro-icons\n```\n\nStart a new conversation afterwards so the skill is loaded. It appears as\n`dev-icons:dev-icons`. To get later versions, refresh the **pro-icons** marketplace in\nthe **Marketplaces** tab (VS Code), or run `/plugin marketplace update pro-icons`\n(terminal).\n\n\nInstall without the plugin system
\n\nCopy the skill folder into your personal skills folder:\n\n```bash\ngit clone https://github.com/Hirusha-Nikson/pro-icons-skill.git\nmkdir -p ~/.claude/skills\ncp -r pro-icons-skill/skills/dev-icons ~/.claude/skills/\n```\n\nOn Windows (PowerShell):\n\n```powershell\ngit clone https://github.com/Hirusha-Nikson/pro-icons-skill.git\nNew-Item -ItemType Directory -Force \"$HOME\\.claude\\skills\"\nCopy-Item -Recurse pro-icons-skill\\skills\\dev-icons \"$HOME\\.claude\\skills\\\"\n```\n\nTo share it with a team, put it in a project's `.claude/skills/` folder instead.\n \n\n## Using the scripts yourself\n\nThe scripts also work without Claude. They need Python 3.8 or newer; PNG banners and\nPNGs at custom sizes also need Pillow (`pip install pillow`).\n\n```bash\ncd skills/dev-icons\npython scripts/find.py --list # all icon ids\npython scripts/find.py k8s postgres # look up names\npython scripts/compose.py react,ts,nodejs,postgres -o stack.svg # banner\npython scripts/export.py docker,kubernetes --size 256 -o icons # single PNGs\npython scripts/animate.py react,ts,nodejs --style wave -o intro.html\n```\n\nRun any script with `--help` to see all its options.\n\n## Missing a logo?\n\nSome well-known brands asked Simple Icons to remove their logos, so these are **not\nincluded**: AWS, Azure, DynamoDB, VS Code, Windows, C#, PowerShell, Playwright, Heroku,\nSlack and OpenAI. Claude will tell you when an icon isn't available rather than drawing\na substitute.\n\nTo request another logo, [open an issue](https://github.com/Hirusha-Nikson/pro-icons-skill/issues).\nIt has to exist on [simpleicons.org](https://simpleicons.org).\n\n## Adding icons (for contributors)\n\nYou need Node.js 20 or newer.\n\n1. Find the logo on [simpleicons.org](https://simpleicons.org) and note its slug\n (the name in the URL or the download filename).\n2. Add an entry to [`source/icons.json`](source/icons.json):\n ```json\n { \"id\": \"zod\", \"slug\": \"zod\", \"name\": \"Zod\", \"category\": \"backend\", \"aliases\": [] }\n ```\n `id` is what people type, so keep it short and lowercase.\n3. Rebuild everything:\n ```bash\n npm install\n npm run build\n ```\n This regenerates the tiles (`skills/dev-icons/tiles.bin`), the icon list, the\n [gallery](gallery/README.md), [`NOTICE.md`](skills/dev-icons/NOTICE.md) and the\n website in `docs/`. Don't edit those generated files by hand.\n4. Check the skill still works and build the upload zip:\n ```bash\n python source/package_skill.py\n ```\n This writes `dist/dev-icons.zip`, ready to upload to claude.ai for testing.\n\n### Releasing a new version\n\n1. Change `version` in both [`.claude-plugin/plugin.json`](.claude-plugin/plugin.json)\n and [`package.json`](package.json), for example to `1.0.1`. Claude Code users only get\n the update when this number changes.\n2. Commit and push, then tag the release:\n ```bash\n git tag v1.0.1\n git push origin v1.0.1\n ```\n3. GitHub Actions checks the skill and publishes a release with `dev-icons.zip` attached.\n\n### How the repo is laid out\n\n| Path | What it is |\n|---|---|\n| `skills/dev-icons/` | **The skill itself.** This is the only folder claude.ai users upload. |\n| `.claude-plugin/` | Makes the repo installable as a Claude Code plugin. |\n| `source/` | The icon list, build script and packaging script. Not part of the skill. |\n| `gallery/` | Browsable icon previews for GitHub. Not part of the skill. |\n| `docs/` | The GitHub Pages website, generated from `source/site/index.html` by `npm run build`. |\n| `.github/workflows/` | Checks the skill on every push and publishes releases. |\n\nAll the tiles are packed into one file (`tiles.bin`) because claude.ai skill uploads\nallow at most 200 files and no archives inside the upload.\n\n## Licence\n\n- **Code and tile designs:** [MIT](LICENSE).\n- **Logos:** **not** covered by the MIT licence. They come from\n [Simple Icons](https://simpleicons.org); some have their own licences, a few of them\n non-commercial (Vue, Sass, Tauri). See [NOTICE.md](skills/dev-icons/NOTICE.md) for\n every logo's licence and source.\n- **Trademarks:** all logos are trademarks of their owners. Use them only to refer to\n the product (for example, \"built with React\"). Including them here does not imply any\n endorsement.\n\nThis project is not affiliated with Anthropic or with any of the brands shown.\n"}