# Devicons

> Free, MIT-licensed library of 1,322 developer, brand, framework, and tooling logos — as plain SVG files, React/Vue/Svelte components, an SVG sprite, and an icon font.

Devicons is a catalog of developer-brand logos (languages, frameworks, databases, cloud providers, AI tools) for diagrams, docs, comparison pages, and UI. Every icon has a full-color and a monochrome (`currentColor`) variant.

## Machine-readable entry points

- [Full icon catalog (Markdown)](https://devicons.io/icons.md): every icon with slug, name, tags, aliases
- [Search index (JSON)](https://devicons.io/search-index.json): one record per icon entry — fields `id, name, description, icons, tags, deprecated, popular, badInDark, badInLight, version?, aliases?`
- [Homepage (Markdown)](https://devicons.io/index.md)
- [Packs index (Markdown)](https://devicons.io/packs.md): curated logo sets
- [Comparisons index (Markdown)](https://devicons.io/compare.md): curated A-vs-B pairs
- [Full documentation in one file](https://devicons.io/llms-full.txt)
- [Sitemap](https://devicons.io/sitemap-index.xml)

## Agent integrations

- [MCP server](https://devicons.io/docs/mcp/): `https://devicons.io/api/mcp` (Streamable HTTP, read-only, no auth). Tools: `search_icons`, `get_icon`, `list_categories`, `get_category`. Claude Code: `claude mcp add --transport http devicons https://devicons.io/api/mcp`. Local stdio: `npx -y devicons mcp`.
- [HTTP API](https://devicons.io/docs/api/): `https://devicons.io/api/v1/` — `icons.json`, `icons/{slug}.json`, `categories.json`, `categories/{slug}.json`, `search?q=`. No key, CORS-enabled.
- [OpenAPI 3.1 spec](https://devicons.io/api/v1/openapi.json)
- [CLI](https://devicons.io/docs/cli/): `npx devicons search <query>`, `npx devicons add <slug...>`, `--json` output.
- [Agent Skills discovery index](https://devicons.io/.well-known/agent-skills/index.json); [SKILL.md](https://devicons.io/.well-known/agent-skills/devicons/SKILL.md) (also at [/skill.md](https://devicons.io/skill.md)): full agent-usage guide
- [Skill icons reference](https://devicons.io/skill/reference/icons.md): recommended icons with file and component names
- [Skill packages reference](https://devicons.io/skill/reference/packages.md): package APIs, props, and URLs
- [agents.md](https://devicons.io/agents.md): agent readiness manifest

## Documentation

- [Documentation index (Markdown)](https://devicons.io/docs.md)
- [Installation](https://devicons.io/docs/installation.md): Pick the package that matches your stack and install it.
- [Quick start](https://devicons.io/docs/quick-start.md): Render your first icon in under a minute.
- [React](https://devicons.io/docs/react.md): Tree-shakeable, typed React components for every Devicons icon.
- [Vue](https://devicons.io/docs/vue.md): Vue 3 components for every Devicons icon. Composition API, SSR, Nuxt ready.
- [Svelte](https://devicons.io/docs/svelte.md): Native Svelte components for every Devicons icon. SvelteKit compatible.
- [Core](https://devicons.io/docs/core.md): The icon catalog, SVG sprite, and font files as one dependency-free package.
- [Icon font](https://devicons.io/docs/icon-font.md): Devicons as a web font. No build step, works everywhere.
- [CDN](https://devicons.io/docs/cdn.md): Use Devicons without npm: hotlink SVGs from devicons.io, or load the icon font, sprite, and catalog from jsDelivr.
- [AI agents](https://devicons.io/docs/agents.md): Connect Claude, Cursor, VS Code, and other AI agents to Devicons over MCP, a free JSON API, a CLI, or a skill. No API key needed.
- [MCP server](https://devicons.io/docs/mcp.md): Hosted MCP server for developer icons and SVG logos. Search, fetch SVGs, and get React, Vue, or Svelte code from any MCP client.
- [Icons API](https://devicons.io/docs/api.md): Free JSON API for 1,300+ developer icons and SVG logos: search, icon details, categories, and an OpenAPI spec. No API key required.
- [CLI](https://devicons.io/docs/cli.md): Search, inspect, and download SVG logos from your terminal with npx devicons. Scriptable JSON output and a local MCP server.
- [skill.md](https://devicons.io/docs/skill.md): Drop Devicons into Claude, Cursor, and any agent-aware tool as a self-contained skill.
- [Theming](https://devicons.io/docs/theming.md): Tint monochrome icons, override brand colors, and handle light and dark variants.
- [Contributing](https://devicons.io/docs/contributing.md): Add a missing icon, improve an existing glyph, or help refine the grid.

## Packs

- [AI Toolkit](https://devicons.io/packs/ai-toolkit.md): Icons for the modern AI developer toolkit — coding copilots, orchestration frameworks, vector databases, and ML libraries.
- [JAMstack Icons](https://devicons.io/packs/jamstack.md): Logos for the modern JAMstack: Astro, Next.js, Vercel, Netlify, and friends.
- [LLM Providers](https://devicons.io/packs/llm-providers.md): Logos for the leading large language model providers — OpenAI, Anthropic, Google Gemini, Mistral, and more.
- [Frontend Frameworks](https://devicons.io/packs/frontend-frameworks.md): Icons for today's leading frontend frameworks — React, Vue, Svelte, Angular, Solid, and Astro.
- [Modern Data Stack Icons](https://devicons.io/packs/modern-data-stack.md): Logos for the modern data stack — warehouses, orchestrators, transformations, and BI tools.
- [DevOps Essentials](https://devicons.io/packs/devops-essentials.md): Core DevOps tooling icons — Docker, Kubernetes, Terraform, GitHub Actions, and more.
- [MERN Stack Icons](https://devicons.io/packs/mern-stack.md): Every logo you need to build a MERN stack app — MongoDB, Express, React, and Node.js.

## Use cases

- [Icons for AI & ML apps](https://devicons.io/use-cases/ai-ml-apps/): Logos for the AI stack teams build with: coding copilots, LLM providers, orchestration frameworks, vector stores, and the classic ML libraries underneath.
- [Icons for database content](https://devicons.io/use-cases/databases/): Relational, document, key-value, graph, and vector database logos — for architecture diagrams, migration guides, and comparison posts.
- [Icons for frontend framework content](https://devicons.io/use-cases/frontend-frameworks/): React, Vue, Svelte, Angular, Solid, Qwik, Preact — plus the meta-frameworks on top (Next.js, Nuxt, SvelteKit, Astro, Remix).
- [Icons for DevOps & infrastructure](https://devicons.io/use-cases/devops-tooling/): CI/CD platforms, container runtimes, orchestrators, and the cloud providers underneath. The logos you reach for when diagramming a deployment pipeline.
- [Icons for design-tool content](https://devicons.io/use-cases/design-tools/): Figma, Sketch, Framer, Adobe XD, Penpot, and the prototyping tools designers actually open each day.
- [Icons for programming-language content](https://devicons.io/use-cases/languages/): JavaScript, TypeScript, Python, Go, Rust, Ruby, Swift, Kotlin — the languages that show up in every "our stack" page.

## Per-icon Markdown

Every icon page `https://devicons.io/icons/{slug}/` has a Markdown twin at `https://devicons.io/icons/{slug}.md` (e.g. [/icons/react.md](https://devicons.io/icons/react.md), [/icons/postgresql.md](https://devicons.io/icons/postgresql.md)) with the description, tags, aliases, website, variant files, SVG URLs, component names, and framework snippets.

## Usage summary

- SVG (no install): `https://devicons.io/devicons/icons/{file}.svg` (color) and `https://devicons.io/devicons/font/{file}.svg` (monochrome). `{file}` is an entry of the icon's `icons` array (e.g. `react`, `nextjs-icon`). CORS-enabled.
- React: `npm install @dev.icons/react` (v1.2.0); Vue: `npm install @dev.icons/vue`; Svelte: `npm install @dev.icons/svelte`. Monochrome components come from the `/mono` subpath (e.g. `@dev.icons/react/mono`). Astro projects use these packages; there is no Astro-specific package.
- Component naming: split the file name on `-`, PascalCase each part, prefix `_` for the reserved names React, Vue, Svelte, Astro (`react` → `_React`, `css` → `Css`, `discord-icon` → `DiscordIcon`, `nextjs-icon` → `NextjsIcon`). No automatic `Icon` suffix.
- Props: `size` (default `"1em"`), `color` (default `"currentColor"`), `alt` (rendered as `<title>`), `mirrored`; other SVG attributes are forwarded.
- Icon font: `npm install devicons` (v2.2.0), then `@import "devicons/css";` and `<i class="devicons devicons-{file}"></i>`.
- `@dev.icons/core` (v1.2.0): exports `ICONS` and `getIcon(name)` (file name, font codepoint, variant flag), plus `dist/icons.json`, a color sprite (`dist/sprite/sprite-symbol.svg`), and font files. It does not ship per-icon SVG files.

## FAQ

- **Is Devicons free?** Yes. The library is MIT licensed and free for personal and commercial use. Brand logos remain trademarks of their owners.
- **Which formats are available?** Color and monochrome SVG files, React/Vue/Svelte components, a color SVG sprite, and a monochrome icon font.
- **How do I install it?** `npm install @dev.icons/react` (or `@dev.icons/vue`, `@dev.icons/svelte`), or `npm install devicons` for the font. For no install, use the SVG URLs above. See [Installation](https://devicons.io/docs/installation.md).
- **How do I request or add an icon?** Open an issue or pull request at https://github.com/vorillaz/devicons. See [Contributing](https://devicons.io/docs/contributing.md).
- **What is the license?** MIT for the library; each logo belongs to its brand owner. Follow the brand's guidelines before implying endorsement. See [License and terms](https://devicons.io/legal/).

## License

[License and terms](https://devicons.io/legal/): MIT for the library code; brand logos remain the property of their owners and are included for identification.