# Devicons — full documentation

> Concatenation of 17 Markdown documents from https://devicons.io. Each section starts with its source URL. Index: https://devicons.io/llms.txt

---
source: https://devicons.io/docs.md
---

[Home](/index.md) › Docs

# Documentation

Open-source developer icons and logos. Crisp, consistent, MIT licensed.

Devicons started as a web font. Now it ships as native packages for React, Vue, and Svelte too.

## Why Devicons

- Icons for brands, languages, frameworks, cloud services, and tooling
- Full-color and monochrome variants for every icon
- Raw SVG, icon font, sprites, and framework components
- Tree-shakeable imports, no runtime fetches
- MIT licensed

## Design

Every icon follows the same grid, optical weight, and corner radius. Any two icons look like they belong together.

## Get started

[Installation](/docs/installation/) covers setup. Or go straight to a framework guide: [React](/docs/react/), [Vue](/docs/vue/), [Svelte](/docs/svelte/).

## Contents

### Getting Started

- [Installation](/docs/installation.md) — Pick the package that matches your stack and install it.
- [Quick start](/docs/quick-start.md) — Render your first icon in under a minute.

### Packages

- [React](/docs/react.md) _(hot)_ — Tree-shakeable, typed React components for every Devicons icon.
- [Vue](/docs/vue.md) — Vue 3 components for every Devicons icon. Composition API, SSR, Nuxt ready.
- [Svelte](/docs/svelte.md) — Native Svelte components for every Devicons icon. SvelteKit compatible.
- [Core](/docs/core.md) — The icon catalog, SVG sprite, and font files as one dependency-free package.
- [Icon font](/docs/icon-font.md) — Devicons as a web font. No build step, works everywhere.
- [CDN](/docs/cdn.md) — Use Devicons without npm: hotlink SVGs from devicons.io, or load the icon font, sprite, and catalog from jsDelivr.

### AI & Agents

- [AI agents](/docs/agents.md) _(new)_ — 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](/docs/mcp.md) _(new)_ — 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](/docs/api.md) _(new)_ — Free JSON API for 1,300+ developer icons and SVG logos: search, icon details, categories, and an OpenAPI spec. No API key required.
- [CLI](/docs/cli.md) _(new)_ — Search, inspect, and download SVG logos from your terminal with npx devicons. Scriptable JSON output and a local MCP server.
- [skill.md](/docs/skill.md) _(new)_ — Drop Devicons into Claude, Cursor, and any agent-aware tool as a self-contained skill.

### Customization

- [Theming](/docs/theming.md) — Tint monochrome icons, override brand colors, and handle light and dark variants.

### Community

- [Contributing](/docs/contributing.md) — Add a missing icon, improve an existing glyph, or help refine the grid.

[← Home](/index.md)

---
source: https://devicons.io/docs/installation.md
---

[Home](/index.md) › [Docs](/docs.md) › Getting Started › Installation

# Installation

Pick the package that matches your stack and install it.

Install the package that matches your project.

## Package managers

```bash
# React
npm install @dev.icons/react

# Vue
npm install @dev.icons/vue

# Svelte
npm install @dev.icons/svelte

# Icon catalog, sprite, and font files
npm install @dev.icons/core

# Icon font (CSS + webfont files)
npm install devicons
```

`pnpm`, `yarn`, and `bun` work the same way.

There is no Astro-specific package. In Astro, use the React, Vue, or Svelte package. Components render to static SVG without a `client:*` directive.

## No build step

Link any SVG straight from devicons.io:

```html
<img src="https://devicons.io/devicons/icons/react.svg" alt="React logo" width="48" height="48" />
```

Or load the icon font from a CDN. The [CDN guide](/docs/cdn/) has pinned URLs for the font, sprite, and catalog.

## Requirements

- Node.js 18.17+ (20.x LTS recommended)
- React 16.8+ / Vue 3.3+ / Svelte 5+
- Any ESM bundler: Vite, Webpack, Rollup, esbuild, Turbopack

## Verify

```tsx
import { Css } from "@dev.icons/react";

export default function Logo() {
  return <Css size={32} alt="CSS" />;
}
```

Component names come from the icon's file name. The name is split on `-` and PascalCased: `css` becomes `Css` and `discord-icon` becomes `DiscordIcon`. The reserved names React, Vue, Svelte, and Astro get a `_` prefix, so the React logo is `_React`.

If the icon renders, you're set. See the [React guide](/docs/react/) for props, tree-shaking, and SSR.

---

→ Next: [Quick start](/docs/quick-start.md)

[← All docs](/docs.md)

---
source: https://devicons.io/docs/quick-start.md
---

[Home](/index.md) › [Docs](/docs.md) › Getting Started › Quick start

# Quick start

Render your first icon in under a minute.

Assumes you have a React, Vue, or Svelte project running. If not, start with [Installation](/docs/installation/).

## 1. Install

```bash
npm install @dev.icons/react
```

## 2. Import and render

```tsx
import { _React, _Vue, Nextjs } from "@dev.icons/react";

export default function Stack() {
  return (
    <div className="flex gap-4">
      <_React size={48} />
      <_Vue size={48} />
      <Nextjs size={48} alt="Next.js" />
    </div>
  );
}
```

Every icon file is a named export. The name is the file name split on `-` and PascalCased, so `nextjs` becomes `Nextjs` and `nextjs-icon` becomes `NextjsIcon`. The names React, Vue, Svelte, and Astro would clash with framework imports, so they get a `_` prefix: `_React`, `_Vue`. Each icon page lists its exact component names.

## 3. Switch to monochrome

Full-color icons are the default. Import from the `/mono` subpath to get single-color variants that inherit `currentColor`.

```tsx
import { _React } from "@dev.icons/react/mono";

<div className="text-accent">
  <_React size={48} />
</div>
```

## 4. Make it interactive

Icons accept all SVG attributes: `onClick`, `aria-label`, `role`, etc.

```tsx
import { GithubIcon } from "@dev.icons/react/mono";

<button
  type="button"
  aria-label="View on GitHub"
  className="text-text-muted hover:text-accent transition-colors"
>
  <GithubIcon size={24} />
</button>
```

## That's it

Browse the [icon library](/search/) for the full catalog, or read the [React guide](/docs/react/) for props, tree-shaking, and SSR.

---

← Previous: [Installation](/docs/installation.md)
→ Next: [React](/docs/react.md)

[← All docs](/docs.md)

---
source: https://devicons.io/docs/react.md
---

[Home](/index.md) › [Docs](/docs.md) › Packages › React

# React

_hot_

Tree-shakeable, typed React components for every Devicons icon.

`@dev.icons/react` ships every icon as a named export. Components are typed, tree-shakeable, and have no runtime dependencies.

> **Why the underscore prefix?** _(note)_
>
> Export names come from the icon's file name, split on `-` and PascalCased (`css` becomes `Css`, `discord-icon` becomes `DiscordIcon`). Four names would collide with framework imports: React, Vue, Svelte, and Astro. Those get an underscore prefix: `import { _React } from "@dev.icons/react";`

## Install

```bash
npm install @dev.icons/react
```

## Usage

```tsx
import { _React } from "@dev.icons/react";

export function Logo() {
  return <_React size={32} />;
}
```

## Monochrome variants

Import from the `/mono` subpath:

```tsx
import { _React } from "@dev.icons/react/mono";

export function MonoLogo() {
  return <_React size={32} />;
}
```

Monochrome icons use `currentColor`, so they inherit the parent's text color.

## Props

Every icon accepts standard SVG props plus these:

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `size` | `string \| number` | `"1em"` | Sets both `width` and `height` |
| `color` | `string` | `"currentColor"` | Sets the root `fill`. Visible on monochrome icons. |
| `alt` | `string` | none | Accessible name, rendered as an SVG `<title>` |
| `mirrored` | `boolean` | `false` | Flips the icon horizontally (`scale(-1, 1)`) |

Anything else (`className`, `style`, `onClick`, `aria-*`, `data-*`) is forwarded to the root `<svg>`. To set defaults for a subtree, wrap it in `IconContext.Provider`:

```tsx
import { IconContext, _React } from "@dev.icons/react";

<IconContext.Provider value={{ size: 24 }}>
  <_React />
</IconContext.Provider>
```

## Tree-shaking

Use named imports. Wildcard imports pull in the entire catalog and defeat tree-shaking in most bundlers.

```tsx
// Good: only _React lands in your bundle
import { _React } from "@dev.icons/react";

// Bad: pulls everything
import * as Devicons from "@dev.icons/react";
```

## SSR and React Server Components

Icons are pure components with no `useState` or `useEffect`. They work in React Server Components, Next.js `app/` routes, Remix, and any SSR setup without extra config. In Astro, they render to static SVG without a `client:*` directive.

```tsx
// app/page.tsx
import { _React } from "@dev.icons/react";

export default function Page() {
  return <_React size={64} />;
}
```

## Accessibility

When an icon carries meaning, pass `alt`. It renders as the SVG's `<title>`:

```tsx
<_React alt="React" size={24} />
```

For purely decorative icons, hide them from assistive tech:

```tsx
<_React aria-hidden="true" size={24} />
```

For icon-only buttons, put the label on the button instead:

```tsx
import { _React } from "@dev.icons/react/mono";

<button aria-label="Open React docs">
  <_React size={20} aria-hidden="true" />
</button>
```

---

← Previous: [Quick start](/docs/quick-start.md)
→ Next: [Vue](/docs/vue.md)

[← All docs](/docs.md)

---
source: https://devicons.io/docs/vue.md
---

[Home](/index.md) › [Docs](/docs.md) › Packages › Vue

# Vue

Vue 3 components for every Devicons icon. Composition API, SSR, Nuxt ready.

`@dev.icons/vue` exports every icon as a Vue 3 component. Works with `<script setup>`, the Options API, Nuxt, and Vite SSR.

> **Why the underscore prefix?** _(note)_
>
> Export names come from the icon's file name, split on `-` and PascalCased (`css` becomes `Css`, `discord-icon` becomes `DiscordIcon`). Four names would collide with framework imports: React, Vue, Svelte, and Astro. Those get an underscore prefix (`_Vue`). Vue templates can't use a tag that starts with `_`, so alias these on import: `import { _Vue as VueLogo } from "@dev.icons/vue";`

## Install

```bash
npm install @dev.icons/vue
```

## Usage

```vue
<script setup lang="ts">
import { _Vue as VueLogo, Nextjs } from "@dev.icons/vue";
</script>

<template>
  <VueLogo :size="48" />
  <Nextjs :size="48" alt="Next.js" />
</template>
```

## Monochrome variants

Import from the `/mono` subpath:

```vue
<script setup lang="ts">
import { _Vue as VueLogo } from "@dev.icons/vue/mono";
</script>

<template>
  <VueLogo :size="48" />
</template>
```

Monochrome icons use `currentColor`, so they inherit the parent's text color.

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `size` | `string \| number` | `"1em"` | Sets both `width` and `height` |
| `color` | `string` | `"currentColor"` | Sets the root `fill`. Visible on monochrome icons. |
| `alt` | `string` | none | Accessible name, rendered as an SVG `<title>` |
| `mirrored` | `boolean` | `false` | Flips the icon horizontally (`scale(-1, 1)`) |

Other attributes (`class`, `style`, `aria-*`, listeners) fall through to the root `<svg>`.

## Nuxt

There is no Nuxt module. Import icons in your components as usual. They render on the server without extra config.

## Tree-shaking

Named imports are ESM-first and fully tree-shakeable.

```ts
import { Nextjs } from "@dev.icons/vue";
```

---

← Previous: [React](/docs/react.md)
→ Next: [Svelte](/docs/svelte.md)

[← All docs](/docs.md)

---
source: https://devicons.io/docs/svelte.md
---

[Home](/index.md) › [Docs](/docs.md) › Packages › Svelte

# Svelte

Native Svelte components for every Devicons icon. SvelteKit compatible.

`@dev.icons/svelte` ships native Svelte 5 components. SvelteKit, Vite, and Astro integrations all work without extra config.

> **Why the underscore prefix?** _(note)_
>
> Export names come from the icon's file name, split on `-` and PascalCased (`css` becomes `Css`, `svelte-icon` becomes `SvelteIcon`). Four names would collide with framework imports: React, Vue, Svelte, and Astro. Those get an underscore prefix (`_Svelte`). Alias them on import so they work as component tags: `import { _Svelte as SvelteLogo } from "@dev.icons/svelte";`

## Install

```bash
npm install @dev.icons/svelte
```

## Usage

```svelte
<script lang="ts">
  import { _Svelte as SvelteLogo, SvelteIcon } from "@dev.icons/svelte";
</script>

<SvelteLogo size={48} />
<SvelteIcon size={48} alt="Svelte" />
```

## Monochrome variants

Import from the `/mono` subpath:

```svelte
<script lang="ts">
  import { SvelteIcon } from "@dev.icons/svelte/mono";
</script>

<SvelteIcon size={48} />
```

Monochrome icons use `currentColor`, so they inherit the parent's text color.

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `size` | `string \| number` | `"1em"` | Sets both `width` and `height` |
| `color` | `string` | `"currentColor"` | Sets the root `fill`. Visible on monochrome icons. |
| `alt` | `string` | none | Accessible name, rendered as an SVG `<title>` |
| `mirrored` | `boolean` | `false` | Flips the icon horizontally (`scale(-1, 1)`) |

Other attributes (`class`, `style`, `aria-*`) are spread onto the root `<svg>`.

## SvelteKit

No special config needed. Import inside any `+page.svelte`, `+layout.svelte`, or component file.

```svelte
<script lang="ts">
  import { GithubIcon } from "@dev.icons/svelte/mono";
</script>

<a href="https://github.com" aria-label="GitHub">
  <GithubIcon size={24} />
</a>
```

---

← Previous: [Vue](/docs/vue.md)
→ Next: [Core](/docs/core.md)

[← All docs](/docs.md)

---
source: https://devicons.io/docs/core.md
---

[Home](/index.md) › [Docs](/docs.md) › Packages › Core

# Core

The icon catalog, SVG sprite, and font files as one dependency-free package.

`@dev.icons/core` holds the catalog of icon files with their font codepoints, `icons.json`, a color SVG sprite, and the icon font files. It has no dependencies.

The framework packages don't need it. Install it when you need the list of icon files, the sprite, or the font files for custom tooling or a plugin.

> **No SVG strings** _(info)_
>
> Core doesn't export SVG markup or ship per-icon SVG files. For individual SVGs, use `https://devicons.io/devicons/icons/{file}.svg` (color) or `https://devicons.io/devicons/font/{file}.svg` (monochrome). See the [CDN guide](/docs/cdn/).

## Install

```bash
npm install @dev.icons/core
```

## Exports

| Export | Type | Description |
| --- | --- | --- |
| `ICONS` | `readonly IconRecord[]` | Every icon file, sorted by codepoint |
| `getIcon` | `(name: string) => IconRecord \| undefined` | O(1) lookup by file name |
| `IconRecord` | type | `{ name, codepoint, unicode, isVariant }` |

```ts
interface IconRecord {
  /** File name without `.svg`, e.g. "adonisjs" or "adonisjs-icon". */
  name: string;
  /** Private Use Area codepoint used by the icon font. */
  codepoint: number;
  /** String.fromCodePoint(codepoint). */
  unicode: string;
  /** True when name ends in "-icon" (glyph-only mark). */
  isVariant: boolean;
}
```

## Usage

```ts
import { ICONS, getIcon } from "@dev.icons/core";

getIcon("nextjs-icon");
// { name: "nextjs-icon", codepoint: ..., unicode: "...", isVariant: true }

const fullLogos = ICONS.filter((icon) => !icon.isVariant).map((icon) => icon.name);
```

## Files

| Subpath export | File |
| --- | --- |
| `@dev.icons/core/icons.json` | `dist/icons.json` (same data as `ICONS`) |
| `@dev.icons/core/sprite` | `dist/sprite/sprite-symbol.svg` (color sprite, `<symbol id="{file}">`) |
| `@dev.icons/core/font/css` | `dist/font/devicons.css` |
| `@dev.icons/core/font/woff2` | `dist/font/devicons.woff2` |
| `@dev.icons/core/font/ttf` | `dist/font/devicons.ttf` |

## When to use core

- You need the full list of icon files for search, filtering, or code generation
- You want to self-host the SVG sprite
- You're building a custom icon component for a framework we don't ship yet
- You're writing a bundler plugin, Figma plugin, or CLI tool

---

← Previous: [Svelte](/docs/svelte.md)
→ Next: [Icon font](/docs/icon-font.md)

[← All docs](/docs.md)

---
source: https://devicons.io/docs/icon-font.md
---

[Home](/index.md) › [Docs](/docs.md) › Packages › Icon font

# Icon font

Devicons as a web font. No build step, works everywhere.

`devicons` is the no-framework option: one CSS file with a glyph for every icon file. It works in legacy stacks and plain HTML.

> **Version numbering & naming** _(info)_
>
> The font package has a higher version number (`>2.x`) than the framework packages since it has been around for almost 12 years. That's why it's also not prefixed with `@dev.icons/` like the others.

## Install

```bash
npm install devicons
```

For a no-build workflow, see the [CDN guide](/docs/cdn/).

## Usage

Import the stylesheet once. With a bundler:

```css
@import "devicons/css";
```

Then add glyphs with the `devicons` base class plus `devicons-{file}`:

```html
<i class="devicons devicons-react"></i>
<i class="devicons devicons-vue"></i>
<i class="devicons devicons-svelte"></i>
```

`{file}` is one of the icon's file names, which each icon page lists (for example `react`, `nextjs`, `nextjs-icon`). Glyphs are monochrome.

## Sizing and color

The font inherits `font-size` and `color`.

```html
<i
  class="devicons devicons-github"
  style="font-size: 32px; color: #ff4d00;"
></i>
```

## Other exports

| Import | File |
| --- | --- |
| `devicons/css` | `dist/devicons.css` |
| `devicons/woff2` | `dist/devicons.woff2` |
| `devicons/ttf` | `dist/devicons.ttf` |
| `devicons/sprite` | `dist/sprite-symbol.svg` |
| `devicons/codepoints` | `dist/codepoints.json` (file name → codepoint) |

For full-color logos, use the [React](/docs/react/), [Vue](/docs/vue/), or [Svelte](/docs/svelte/) packages, or the [SVG URLs](/docs/cdn/).

---

← Previous: [Core](/docs/core.md)
→ Next: [CDN](/docs/cdn.md)

[← All docs](/docs.md)

---
source: https://devicons.io/docs/cdn.md
---

[Home](/index.md) › [Docs](/docs.md) › Packages › CDN

# CDN

Use Devicons without npm: hotlink SVGs from devicons.io, or load the icon font, sprite, and catalog from jsDelivr.

You don't need a build step to use Devicons. Individual SVGs are served from devicons.io, and the icon font, sprite, and catalog come from npm through public CDNs. This works for prototypes, CodePen demos, READMEs, and static HTML.

## SVG files

Every icon file is published as a standalone, CORS-enabled SVG:

| Variant | URL |
| --- | --- |
| Color | `https://devicons.io/devicons/icons/{file}.svg` |
| Monochrome (`currentColor`) | `https://devicons.io/devicons/font/{file}.svg` |

`{file}` is one of the icon's file names, listed on each icon page (for example `react`, `nextjs`, `nextjs-icon`). Files ending in `-icon` are the glyph-only mark.

### As `<img>`

```html
<img
  src="https://devicons.io/devicons/icons/react.svg"
  alt="React logo"
  width="48"
  height="48"
/>
```

Markdown works too:

```md
![PostgreSQL](https://devicons.io/devicons/icons/postgresql.svg)
```

### Fetch and inline

Inlining the monochrome SVG lets it follow CSS `color`:

```html
<span class="icon" data-icon="postgresql" aria-hidden="true"></span>

<script type="module">
  const BASE = "https://devicons.io/devicons/font";

  for (const el of document.querySelectorAll("[data-icon]")) {
    const file = el.getAttribute("data-icon");
    const res = await fetch(`${BASE}/${file}.svg`);
    el.innerHTML = await res.text();
  }
</script>
```

> **No per-icon SVGs on npm CDNs** _(info)_
>
> The npm packages don't ship individual SVG files, so jsDelivr and UNPKG have no per-icon SVG URL. Use the devicons.io URLs above.

## Icon font

One `<link>` tag is enough. Pin the version in production.

**jsDelivr**

```html
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/devicons@2.3.0/dist/devicons.css"
/>
```

**UNPKG**

```html
<link
  rel="stylesheet"
  href="https://unpkg.com/devicons@2.3.0/dist/devicons.css"
/>
```

Then use it:

```html
<i class="devicons devicons-react"></i>
```

See the [icon font guide](/docs/icon-font/) for sizing and color.

## SVG sprite

`@dev.icons/core` ships a color sprite at `dist/sprite/sprite-symbol.svg`: one `<svg>` with every icon file as a `<symbol>`. Symbol IDs are file names (`#react`, `#nextjs-icon`).

**jsDelivr**

```html
https://cdn.jsdelivr.net/npm/@dev.icons/core@1.3.0/dist/sprite/sprite-symbol.svg
```

> **Self-host the sprite** _(info)_
>
> Browsers don't follow `<use href>` across origins. Download the sprite (or copy it from `node_modules/@dev.icons/core/dist/sprite/sprite-symbol.svg`) into your static assets and reference it from your own domain. The file is large (about 3.5 MB), so this approach suits pages that need many icons.

```html
<svg class="icon" width="24" height="24" role="img" aria-label="React logo">
  <use href="/sprite-symbol.svg#react"></use>
</svg>
```

## Icon catalog

The list of icon files, with font codepoints, as JSON:

**jsDelivr**

```html
https://cdn.jsdelivr.net/npm/@dev.icons/core@1.3.0/dist/icons.json
```

For names, tags, and aliases, use [`https://devicons.io/search-index.json`](/search-index.json).

## Versioning and caching

npm CDNs honor exact versions and semver ranges:

> **Cache behavior** _(tip)_
>
> - **Pinned** (`@1.2.3`): cached at the edge indefinitely. Use this in production.
> - **Range** (`@^1`): revalidated periodically, so it picks up patches and minor releases.
> - **`@latest`**: changes with every release. Only use it for demos.

The devicons.io SVG URLs aren't versioned. They always serve the current artwork.

## When CDN is not enough

- Tree-shaken, typed components: [`@dev.icons/react`](/docs/react/), [`@dev.icons/vue`](/docs/vue/), [`@dev.icons/svelte`](/docs/svelte/)
- Programmatic access to the icon list: install [`@dev.icons/core`](/docs/core/) locally

---

← Previous: [Icon font](/docs/icon-font.md)
→ Next: [AI agents](/docs/agents.md)

[← All docs](/docs.md)

---
source: https://devicons.io/docs/agents.md
---

[Home](/index.md) › [Docs](/docs.md) › AI & Agents › AI agents

# AI agents

_new_

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.

Devicons is built for AI coding agents as well as people. An agent can search a multitude of developer logos, fetch the SVG, and write the React, Vue, or Svelte import for you, without guessing file names or URLs. Every surface is free, read-only, and needs no API key.

## Pick a surface

| You're using | Use | Setup |
| --- | --- | --- |
| Claude Code, Cursor, VS Code, Windsurf, Codex, Claude Desktop | **[MCP server](/docs/mcp/)** | One command or one JSON entry |
| Your own code, a plugin, or a no-code tool | **[Icons API](/docs/api/)** | Plain HTTPS + JSON |
| A terminal, a script, or CI | **[CLI](/docs/cli/)** | `npx devicons` |
| An agent that reads skills or instructions from a URL | **[skill.md](/docs/skill/)** | One prompt |

The MCP server is the best fit for chat and coding agents: the agent calls `search_icons`, then `get_icon` for the SVG and ready-to-paste code. The API and CLI expose the same data for everything else.

## Quick start

Claude Code:

```bash
claude mcp add --transport http devicons https://devicons.io/api/mcp
```

Then ask: *"Add the PostgreSQL and Redis logos to the architecture diagram"* or *"Use the Devicons React component for the Vercel logo in the footer."*

Any other tool:

```bash
curl "https://devicons.io/api/v1/search?q=postgres&limit=3"
npx devicons add react vue --out ./src/icons
```

## Discovery files

Agents and crawlers can find every surface from the domain alone:

| File | What it describes |
| --- | --- |
| [`/agents.md`](/agents.md) | Every agent surface on one page |
| [`/llms.txt`](/llms.txt) | Site overview for LLMs, with an "Agent integrations" section |
| [`/.well-known/mcp.json`](/.well-known/mcp.json) | The hosted MCP server: URL, transport, tools |
| [`/.well-known/api-catalog`](/.well-known/api-catalog) | API catalog (RFC 9727) linking the OpenAPI spec and docs |
| [`/api/v1/openapi.json`](/api/v1/openapi.json) | OpenAPI 3.1 description of the JSON API |
| [`/.well-known/agent-skills/index.json`](/.well-known/agent-skills/index.json) | Agent Skills discovery index |

Every docs and icon page also has a Markdown twin (for example [`/icons/react.md`](/icons/react.md)), and HTML pages answer `Accept: text/markdown` with Markdown.

> **Licensing** _(tip)_
>
> The SVG files and packages are MIT licensed. The logos themselves are trademarks of their owners, so follow each brand's guidelines when an agent places them in your product.

---

← Previous: [CDN](/docs/cdn.md)
→ Next: [MCP server](/docs/mcp.md)

[← All docs](/docs.md)

---
source: https://devicons.io/docs/mcp.md
---

[Home](/index.md) › [Docs](/docs.md) › AI & Agents › MCP server

# MCP server

_new_

Hosted MCP server for developer icons and SVG logos. Search, fetch SVGs, and get React, Vue, or Svelte code from any MCP client.

The Devicons MCP server gives AI agents direct access to 1,300+ developer, brand, framework, and tooling logos. Agents search by name or tag, fetch the SVG markup, and get the exact import for your framework, so they stop guessing slugs and inventing file paths.

| | |
| --- | --- |
| **URL** | `https://devicons.io/api/mcp` |
| **Transport** | Streamable HTTP (stateless) |
| **Authentication** | None |
| **Access** | Read-only |
| **Discovery** | [`/.well-known/mcp.json`](/.well-known/mcp.json) |

## Connect your client

### Any agent, one command

[add-mcp](https://github.com/neon-solutions/add-mcp) detects the coding agents on your machine (Claude Code, Cursor, VS Code, Codex, and more) and adds the server to each one you pick:

```bash
npx add-mcp https://devicons.io/api/mcp -g
```

`-g` installs it for every project. Leave it off to write the config into the current project instead. To set up one client by hand, use its section below.

### Claude Code

```bash
claude mcp add --transport http devicons https://devicons.io/api/mcp
```

Add `--scope user` to make it available in every project.

### Cursor

Add to `.cursor/mcp.json` in your project, or to the global Cursor MCP settings:

```json
{
  "mcpServers": {
    "devicons": {
      "url": "https://devicons.io/api/mcp"
    }
  }
}
```

### VS Code

Add to `.vscode/mcp.json`:

```json
{
  "servers": {
    "devicons": {
      "type": "http",
      "url": "https://devicons.io/api/mcp"
    }
  }
}
```

### Windsurf

Open Windsurf's MCP settings, view the raw config, and add the same `mcpServers` entry as Cursor.

### Claude Desktop

Open **Settings → Connectors → Add custom connector** and paste `https://devicons.io/api/mcp`. Claude Desktop's JSON config file only runs local servers; to use it, add the [local server](#run-it-locally) entry there instead.

### Codex CLI

```bash
codex mcp add devicons --url https://devicons.io/api/mcp
```

### Any other client

Name `devicons`, URL `https://devicons.io/api/mcp`, transport Streamable HTTP, no authentication.

## Run it locally

The same tools are available over stdio from the [`devicons`](/docs/cli/) package (Node 20+). The local server reads from the public API:

```json
{
  "mcpServers": {
    "devicons": {
      "command": "npx",
      "args": ["-y", "devicons", "mcp"]
    }
  }
}
```

Set `DEVICONS_API` to point it at another deployment.

## Tools

| Tool | Inputs | Returns |
| --- | --- | --- |
| `search_icons` | `query`, optional `category`, `limit` (1–50, default 10) | Ranked icons with slug, name, tags, page URL, and SVG URL, plus the total match count |
| `get_icon` | `slug`, optional `framework` (`react`, `vue`, `svelte`, `html`; default `react`), `include_svg` (default `true`) | Metadata, every variant's color and monochrome SVG URL, the primary SVG markup, and an install command plus code |
| `list_categories` | none | Categories with slug and icon count |
| `get_category` | `slug`, optional `limit` (1–200, default 50) | The category's icons, most recognizable first |

Every tool is read-only and returns structured content plus the same information as text, so clients that only show text still get the SVG markup and URLs. Slugs are case-insensitive. Unknown slugs come back as tool errors that tell the model which tool to call instead.

## Example prompts

- "Find the logos for our stack (Next.js, Postgres, Redis, Vercel) and add them to `components/stack.tsx` with `@dev.icons/react`."
- "Put the monochrome GitHub, Discord, and X logos in the footer as inline SVG."
- "List every LLM provider logo Devicons has."

## Troubleshooting

- **Opening the URL in a browser shows "method not allowed".** That's expected: MCP clients POST JSON-RPC to the endpoint. Use one of the setups above.
- **Your client only supports stdio.** Use the [local server](#run-it-locally).
- **Behind a firewall.** Both the hosted and the local server need outbound HTTPS access to `devicons.io`.

> **No MCP support?** _(tip)_
>
> The same data is available from the [Icons API](/docs/api/) and the [CLI](/docs/cli/), and agents that read instructions from a URL can use [skill.md](/docs/skill/).

---

← Previous: [AI agents](/docs/agents.md)
→ Next: [Icons API](/docs/api.md)

[← All docs](/docs.md)

---
source: https://devicons.io/docs/api.md
---

[Home](/index.md) › [Docs](/docs.md) › AI & Agents › Icons API

# Icons API

_new_

Free JSON API for 1,300+ developer icons and SVG logos: search, icon details, categories, and an OpenAPI spec. No API key required.

The Devicons API is a free, read-only JSON API for developer, brand, framework, and tooling logos. Search icons, read metadata and SVG URLs, and browse categories from any language or tool. It needs no key and allows cross-origin requests from the browser.

**Base URL:** `https://devicons.io/api/v1`

**OpenAPI 3.1 spec:** [`/api/v1/openapi.json`](/api/v1/openapi.json)

## Endpoints

| Method | Path | Returns |
| --- | --- | --- |
| GET | `/search?q={query}` | Ranked icons matching a name, alias, tag, or description |
| GET | `/icons.json` | Every active icon |
| GET | `/icons/{slug}.json` | One icon with variants and component names |
| GET | `/categories.json` | Categories with icon counts |
| GET | `/categories/{slug}.json` | One category and its icons |

Icon SVGs are plain files: `https://devicons.io/devicons/icons/{file}.svg` (color) and `https://devicons.io/devicons/font/{file}.svg` (monochrome, `currentColor`). The API returns these URLs for you.

## Search icons

```bash
curl "https://devicons.io/api/v1/search?q=postgres&limit=2"
```

```json
{
  "query": "postgres",
  "count": 2,
  "total": 10,
  "results": [
    {
      "slug": "postgresql",
      "name": "PostgreSQL",
      "tags": ["database", "sql", "rdbms", "open-source"],
      "popular": true,
      "url": "https://devicons.io/icons/postgresql/",
      "svg": "https://devicons.io/devicons/icons/postgresql.svg"
    },
    {
      "slug": "supabase",
      "name": "Supabase",
      "tags": ["database", "backend", "postgresql", "open-source", "baas"],
      "popular": true,
      "url": "https://devicons.io/icons/supabase/",
      "svg": "https://devicons.io/devicons/icons/supabase-icon.svg"
    }
  ]
}
```

| Parameter | Required | Description |
| --- | --- | --- |
| `q` | yes | 1–100 characters. Matches names, aliases, tags, and descriptions, with typo tolerance. |
| `limit` | no | 1–100, default 20. `count` is how many results came back; `total` is how many icons matched before the limit. |
| `category` | no | Only return icons in this category slug, for example `database`. |

Ranking matches the search on devicons.io: exact name, then exact alias, then name prefix, then the closest fuzzy matches.

## Get one icon

```bash
curl https://devicons.io/api/v1/icons/react.json
```

```json
{
  "slug": "react",
  "name": "React",
  "tags": ["javascript", "frontend", "ui-library", "meta"],
  "popular": true,
  "url": "https://devicons.io/icons/react/",
  "svg": "https://devicons.io/devicons/icons/react.svg",
  "description": "React is a declarative JavaScript library by Meta…",
  "aliases": ["React.js", "ReactJS"],
  "website": "https://react.dev/",
  "license": null,
  "brandGuidelines": null,
  "mainColor": null,
  "badInDark": false,
  "badInLight": false,
  "deprecated": false,
  "recommended": true,
  "variants": [
    {
      "file": "react",
      "label": "Logo with wordmark",
      "svg": "https://devicons.io/devicons/icons/react.svg",
      "mono": "https://devicons.io/devicons/font/react.svg"
    }
  ],
  "components": {
    "react": { "package": "@dev.icons/react", "mono": "@dev.icons/react/mono", "name": "_React" },
    "vue": { "package": "@dev.icons/vue", "mono": "@dev.icons/vue/mono", "name": "_React" },
    "svelte": { "package": "@dev.icons/svelte", "mono": "@dev.icons/svelte/mono", "name": "_React" }
  }
}
```

`badInDark` / `badInLight` flag marks that need a backdrop on dark or light backgrounds. Deprecated icons keep their detail file so old links work, but they're left out of lists and search.

## List and browse categories

```bash
curl https://devicons.io/api/v1/categories.json
curl https://devicons.io/api/v1/categories/database.json
```

Categories are returned largest first. A category's icons are ordered most recognizable first, the same as its [category page](/icons/tag/).

## Use it from code

```ts
const res = await fetch('https://devicons.io/api/v1/search?q=vercel&limit=1');
const { results } = await res.json();
const svg = await fetch(results[0].svg).then(r => r.text());
```

Every response is described with JSON Schema in the [OpenAPI spec](/api/v1/openapi.json). Generate TypeScript types from it with a tool such as `openapi-typescript`.

## Errors

Errors use HTTP status codes and a JSON body:

```json
{ "error": { "code": "not_found", "message": "No such resource. See https://devicons.io/docs/api/" } }
```

| Status | `code` | When |
| --- | --- | --- |
| 400 | `invalid_param` | Missing or invalid `q` or `limit` |
| 404 | `not_found` | Unknown icon or category slug |
| 500 | `internal` | Unexpected server error; retry later |

A `429 Too Many Requests` can also come from Cloudflare's rate limiting, without a JSON body. Back off and retry.

## Caching and limits

- Icon, category, and OpenAPI files are static, served from Cloudflare's edge, and cacheable for five minutes (revalidation is cheap). Search responses are cacheable for five minutes too.
- Responses send `Access-Control-Allow-Origin: *`, so you can call the API from a browser.
- Cache responses on your side, and prefer `icons.json` over thousands of per-icon requests.
- Requests may be rate limited per IP.

## Fair use

The API is free for tools, plugins, extensions, and agents that help people use these logos. Please don't use it to rebuild a competing icon catalog. The SVG files are MIT licensed; the logos are trademarks of their owners.

> **Building an AI agent?** _(tip)_
>
> The [MCP server](/docs/mcp/) wraps this API as tools, including SVG markup and framework code, so agents don't need to call it themselves.

## How it runs

The API runs on Cloudflare Pages. The JSON files are prebuilt at deploy time and served as static assets; only search and MCP run as Pages Functions, and search loads a prebuilt index. If you run your own deployment of this site, two optional Cloudflare dashboard settings help under load:

- **Rate limiting:** a WAF rate-limiting rule on `/api/*`, for example 60 requests per 10 seconds per IP. This is available on the free plan.
- **Edge caching for search:** a Cache Rule that marks `/api/v1/search*` as eligible for cache. This lets Cloudflare answer repeat searches without running the Function.

---

← Previous: [MCP server](/docs/mcp.md)
→ Next: [CLI](/docs/cli.md)

[← All docs](/docs.md)

---
source: https://devicons.io/docs/cli.md
---

[Home](/index.md) › [Docs](/docs.md) › AI & Agents › CLI

# CLI

_new_

Search, inspect, and download SVG logos from your terminal with npx devicons. Scriptable JSON output and a local MCP server.

The `devicons` CLI finds developer logos and saves them as SVG files without leaving your terminal. It reads from the [Icons API](/docs/api/), prints readable tables or JSON, and also runs the Devicons [MCP server](/docs/mcp/) locally. It requires Node 20 or newer, and there's nothing to configure.

```bash
npx devicons search react
```

## Commands

| Command | What it does |
| --- | --- |
| `devicons search <query>` | Search icons by name, alias, or tag |
| `devicons info <slug>` | Show an icon's description, tags, variants, and component names |
| `devicons svg <slug>` | Print an icon's SVG to stdout |
| `devicons add <slug...>` | Save icons as SVG files |
| `devicons categories` | List icon categories |
| `devicons category <slug>` | List the icons in a category |
| `devicons mcp` | Run the MCP server over stdio |

## Options

| Option | Applies to | Description |
| --- | --- | --- |
| `--json` | search, info, categories, category | Print the API response as JSON |
| `--category <slug>` | search | Only return icons in a category |
| `--limit <n>` | search (1–100), category (1–200) | Maximum results |
| `--variant <file>` | svg | Pick a specific variant file, such as `nextjs-icon` |
| `--mono` | svg, add | Use the monochrome (`currentColor`) variant |
| `--out <dir>` | add | Output directory, default `./icons` |
| `--force` | add | Overwrite files that already exist |
| `--api <url>` | all | API base URL (default `https://devicons.io`, or `DEVICONS_API`) |
| `-h`, `--help` / `-v`, `--version` | — | Help and version |

## Examples

Download the logos for your stack:

```bash
npx devicons add nextjs postgresql redis vercel --out ./public/logos
```

Inline a monochrome SVG that follows your text color:

```bash
npx devicons svg github --mono > src/icons/github.svg
```

Find every vector database logo, as JSON:

```bash
npx devicons search "vector database" --json
```

List the LLM provider logos:

```bash
npx devicons category llm --limit 20
```

## Use in scripts and CI

`--json` prints exactly what the [API](/docs/api/) returns, so you can pipe it into `jq`:

```bash
npx devicons search docker --json | jq -r '.results[].svg'
```

Exit codes:

| Code | Meaning |
| --- | --- |
| `0` | Success |
| `1` | Usage error: unknown command or flag, missing or invalid slug, invalid `--api` URL, or Node older than 20 |
| `2` | Icon, variant, or category not found |
| `3` | Network or API error |
| `4` | Could not write a file |

Slugs are case-insensitive. `add` only writes inside `--out`, skips files that already exist unless you pass `--force`, and prints every file it writes.

> **Install it** _(tip)_
>
> `npx` downloads the CLI on first use. For repeat use, install it with `npm install -g devicons`. The CLI ships in the same package as the [icon font](/docs/icon-font/), with no extra dependencies.

---

← Previous: [Icons API](/docs/api.md)
→ Next: [skill.md](/docs/skill.md)

[← All docs](/docs.md)

---
source: https://devicons.io/docs/skill.md
---

[Home](/index.md) › [Docs](/docs.md) › AI & Agents › skill.md

# skill.md

_new_

Drop Devicons into Claude, Cursor, and any agent-aware tool as a self-contained skill.

Devicons has a ready-to-install agent skill. Point Claude, Cursor, or any tool that reads a [Claude-style skill](https://docs.claude.com/en/docs/agents-and-tools/agent-skills/overview) at a single URL. The agent then gets the package list, component naming rules, SVG URLs, and catalog metadata.

If your tool supports MCP, the [MCP server](/docs/mcp/) is usually a better fit: the agent calls it for search results, SVG markup, and code instead of reading instructions. For your own integrations, use the [Icons API](/docs/api/).

## One-line prompt

In any agent conversation:

```
Read https://devicons.io/skill.md and follow the instructions to use @dev.icons.
```

The agent fetches the skill. It can then generate icon code, pick packages, build SVG URLs, and resolve slugs from free-text queries.

## Discovery endpoint

Devicons implements the [Cloudflare Agent Skills Discovery](https://github.com/cloudflare/agent-skills-discovery-rfc) spec (v0.2.0). Any compliant client can find the skill at:

```
https://devicons.io/.well-known/agent-skills/index.json
```

The index lists each skill with its type, description, artifact URL, and SHA-256 digest.

## Skill files

| File | URL |
| --- | --- |
| **Discovery index** | [`/.well-known/agent-skills/index.json`](/.well-known/agent-skills/index.json) |
| **SKILL.md** (canonical) | [`/.well-known/agent-skills/devicons/SKILL.md`](/.well-known/agent-skills/devicons/SKILL.md) |
| **SKILL.md** (short alias) | [`/skill.md`](/skill.md) |
| **reference/icons.md** | [`/skill/reference/icons.md`](/skill/reference/icons.md) |
| **reference/packages.md** | [`/skill/reference/packages.md`](/skill/reference/packages.md) |

`/skill.md` returns the same bytes as the canonical path. For a site-wide overview, see [`/llms.txt`](/llms.txt) and [`/llms-full.txt`](/llms-full.txt).

## Install with the skills CLI

The [skills](https://github.com/vercel-labs/skills) CLI finds the skill through the discovery endpoint and installs it for the agents you pick:

```bash
npx skills add https://devicons.io
```

Add `-g` to install it for every project.

## Install locally

To copy the files by hand, for an agent that loads skills from a local directory:

```bash
SKILL_DIR=~/.claude/skills/devicons
mkdir -p "$SKILL_DIR/reference"
curl -sL https://devicons.io/.well-known/agent-skills/devicons/SKILL.md > "$SKILL_DIR/SKILL.md"
curl -sL https://devicons.io/skill/reference/icons.md > "$SKILL_DIR/reference/icons.md"
curl -sL https://devicons.io/skill/reference/packages.md > "$SKILL_DIR/reference/packages.md"
```

Change `SKILL_DIR` to match your tool: `~/.claude/skills/` for Claude Code, `~/.cursor/skills/` for Cursor.

> **Dynamic content** _(tip)_
>
> The skill files are regenerated from the catalog on every deploy. Download them again to get the current icon list and component names.

## What the skill covers

Once loaded, the agent can:

- Pick the right package for a framework
- Resolve free-text queries ("the Postgres logo") to canonical slugs
- Generate component imports for React, Vue, or Svelte
- Build SVG URLs (`https://devicons.io/devicons/icons/{file}.svg`) and pinned font and sprite URLs
- Emit `<img>`, icon-font, sprite `<use>`, or inline-SVG markup
- Read icon metadata: brand colors, tags, aliases, and contrast hints

## When the skill triggers

The skill activates when a task mentions:

- A developer brand or logo ("add the React logo")
- An icon format (SVG, webfont, sprite)
- Tech categories ("a frontend framework", "a cloud provider")
- The `@dev.icons/*` or `devicons` package names

To force activation, use the one-line prompt above.

## Updating

The skill tracks the same data as this website. New icons show up in the endpoints with the next deploy.

For local installs, re-run the `curl` commands for a fresh copy.

## Under the hood

Generated from the same content collection that drives the [icon library](/icons/):

1. Every icon MDX file carries metadata (`tags`, `popular`, `recommended`, `aliases`, `mainColor`, etc.)
2. A [script](https://github.com/vorillaz/devicons/blob/canary/apps/website/scripts/compute-recommended.ts) promotes flagship icons per tag to `recommended: true`
3. Astro endpoints at `/skill.md` and `/skill/reference/*` render the collection as Markdown at build time
4. Agents consume the markdown directly

---

← Previous: [CLI](/docs/cli.md)
→ Next: [Theming](/docs/theming.md)

[← All docs](/docs.md)

---
source: https://devicons.io/docs/theming.md
---

[Home](/index.md) › [Docs](/docs.md) › Customization › Theming

# Theming

Tint monochrome icons, override brand colors, and handle light and dark variants.

Each icon has two variants: a full-color brand mark and a monochrome glyph that inherits `currentColor`. Import monochrome variants from the `/mono` subpath.

## Tint with currentColor

Set a text color on the parent element. Monochrome icons inherit it.

```tsx
import { _React, GithubIcon } from "@dev.icons/react/mono";

<div className="text-accent">
  <_React size={48} />
</div>

<button className="text-text-muted hover:text-accent transition-colors">
  <GithubIcon size={20} />
</button>
```

## Override with the color prop

Pass a color directly for one-off use:

```tsx
import { _React } from "@dev.icons/react/mono";

<_React color="#ff4d00" size={48} />
```

## CSS custom properties

Use design tokens to control icon color:

```css
:root {
  --icon-color: #ff4d00;
}

.icon {
  color: var(--icon-color);
}
```

```tsx
import { _React } from "@dev.icons/react/mono";

<span className="icon">
  <_React size={48} />
</span>
```

## Dark mode

Some full-color marks are mostly black or white and disappear on one theme (GitHub, Vercel, OpenAI). Icon pages flag these, and so does `search-index.json` with `badInDark` and `badInLight`. You have two options:

- Switch to the monochrome variant, which follows the text color on either theme:

```tsx
import { GithubIcon } from "@dev.icons/react/mono";

<span className="text-text">
  <GithubIcon size={32} />
</span>
```

- Keep the color mark and give it a contrasting backdrop:

```tsx
import { GithubIcon } from "@dev.icons/react";

<span className="inline-flex p-1 bg-white">
  <GithubIcon size={32} />
</span>
```

## Brand guidelines

Icons with strict brand guidelines (Slack, Figma, Google) default to guideline-approved colors. Check the brand's usage rules before overriding. Most guidelines are linked on the icon's detail page.

---

← Previous: [skill.md](/docs/skill.md)
→ Next: [Contributing](/docs/contributing.md)

[← All docs](/docs.md)

---
source: https://devicons.io/docs/contributing.md
---

[Home](/index.md) › [Docs](/docs.md) › Community › Contributing

# Contributing

Add a missing icon, improve an existing glyph, or help refine the grid.

All changes land through pull requests [on GitHub](https://github.com/vorillaz/devicons).

## Before you open a PR

1. **Search first.** Check the [icon library](/search/) and open issues for duplicates.
2. **Follow the grid.** Icons use a unified grid. Larger marks use 2px strokes.
3. **Check brand guidelines.** Link the guideline you followed for company/product logos.
4. **Include:**
   - A one-sentence description in the metadata frontmatter
   - At least one tag (`frontend`, `cloud`, `database`, etc.)
   - A link to the official brand website
   - Both colored and monochrome SVG variants

## Adding an icon

1. Add the optimized SVG to `packages/core/export-files/icons/<slug>.svg`
2. Add the monochrome version to `packages/core/export-files/font/<slug>.svg`

Use kebab-case file names (`visual-studio-code`). For a glyph-only variant, add the `-icon` suffix (`nextjs` and `nextjs-icon`). The file name becomes the component name (`nextjs-icon` becomes `NextjsIcon`), the public SVG URL (`https://devicons.io/devicons/icons/nextjs-icon.svg`), and the font class (`devicons-nextjs-icon`).

3. Commit: `feat: add next-js icon`
4. Generate the docs page:

```bash
cd apps/website && pnpm run copy:mdx
```

5. Fill in the description, tags, alternatives, and website link in the generated MDX file
6. Commit: `docs: add next-js icon`

## Improving an existing icon

- Keep original icon names. They are public API.
- Match the visual weight of neighboring icons.
- Test both colored and monochrome variants.

## Icon specs

- Canvas size: `600x600`, maxing out by width or height
- Clean up SVGs: remove unnecessary groups, metadata, and attributes
- Monochrome icons use `currentColor` for fill or stroke
- Use [SVGO](https://github.com/svg/svgo) with default config to optimize

## Code of conduct

Be kind. Assume good intent.

---

← Previous: [Theming](/docs/theming.md)

[← All docs](/docs.md)

---
source: https://devicons.io/skill.md
---

---
name: devicons
description: Use Devicons (@dev.icons/*) — 1,397 developer, brand, framework, and tooling logos as React, Vue, and Svelte components, public SVG URLs, an SVG sprite, and an icon font. Covers installation, component naming, monochrome variants, SVG URLs, the icon catalog, and variant selection. Use when working with developer logos, brand icons, framework marks, or when needing icon assets in SVG, font, or sprite format.
---

# Devicons

1,397 developer, brand, framework, and tooling logos as React, Vue, and Svelte components, plain SVG files, an SVG sprite, and a web font. 136 flagship icons are flagged `recommended` across 1015 tags.

- **Website**: [devicons.io](https://devicons.io/)
- **Browse all icons**: [devicons.io/icons/](https://devicons.io/icons/)
- **Docs**: [devicons.io/docs/](https://devicons.io/docs/)
- **GitHub**: [github.com/vorillaz/devicons](https://github.com/vorillaz/devicons)

## Key concepts

- **Icon entry** — one brand/technology, identified by a slug (e.g. `react`, `nextjs`, `postgresql`). Pages live at `https://devicons.io/icons/<slug>/` with a Markdown twin at `https://devicons.io/icons/<slug>.md`.
- **Icon file** — each entry has one or more files listed in its `icons` array (e.g. `nextjs` has `nextjs-icon` and `nextjs`). Files ending in `-icon` are the glyph-only mark; the others are the full logo/wordmark. **Files, not slugs, drive component names, SVG URLs, sprite ids, and font classes.**

## Discovery

The skill is published per the [Agent Skills Discovery](https://github.com/cloudflare/agent-skills-discovery-rfc) spec. Any compliant client can find it via:

```
https://devicons.io/.well-known/agent-skills/index.json
```

## Use the MCP server or API when available

If your environment supports MCP, prefer the hosted Devicons MCP server over guessing slugs or URLs. It is read-only and needs no key:

```bash
claude mcp add --transport http devicons https://devicons.io/api/mcp
```

Tools: `search_icons` (find slugs), `get_icon` (SVG markup, variant URLs, React/Vue/Svelte code), `list_categories`, `get_category`. Local stdio alternative: `npx -y devicons mcp`. Setup for other clients: https://devicons.io/docs/mcp/

Without MCP, use the JSON API (no key, CORS-enabled):

- Search: `https://devicons.io/api/v1/search?q=postgres&limit=5`
- Icon detail: `https://devicons.io/api/v1/icons/{slug}.json`
- Categories: `https://devicons.io/api/v1/categories.json`
- OpenAPI: `https://devicons.io/api/v1/openapi.json`

## Skill files

| File | URL |
| --- | --- |
| **Discovery index** | `https://devicons.io/.well-known/agent-skills/index.json` |
| **SKILL.md** (this file) | `https://devicons.io/.well-known/agent-skills/devicons/SKILL.md` |
| **reference/icons.md** | `https://devicons.io/skill/reference/icons.md` |
| **reference/packages.md** | `https://devicons.io/skill/reference/packages.md` |

**Install locally** (replace `~/.claude` with your agent's skill directory):

```bash
SKILL_DIR=~/.claude/skills/devicons
mkdir -p "$SKILL_DIR/reference"
curl -sL https://devicons.io/.well-known/agent-skills/devicons/SKILL.md > "$SKILL_DIR/SKILL.md"
curl -sL https://devicons.io/skill/reference/icons.md > "$SKILL_DIR/reference/icons.md"
curl -sL https://devicons.io/skill/reference/packages.md > "$SKILL_DIR/reference/packages.md"
```

You can also read these files directly from the URLs above — no install required.

## Packages at a glance

| Package | Version | Use case |
| --- | --- | --- |
| `@dev.icons/react` | 1.3.0 | React components (color by default, monochrome via `/mono`) |
| `@dev.icons/vue` | 1.3.0 | Vue 3 components (color by default, monochrome via `/mono`) |
| `@dev.icons/svelte` | 1.3.0 | Svelte 5 components (color by default, monochrome via `/mono`) |
| `@dev.icons/core` | 1.3.0 | Icon catalog (`ICONS`, `getIcon`), `icons.json`, a color SVG sprite, and the icon font files |
| `devicons` | 2.3.0 | Icon web font (CSS + woff2/ttf), no build step required |

There is no dedicated Astro package. In Astro, use `@dev.icons/react` (or vue/svelte) components — they render to static SVG without a `client:*` directive.

## Installation

```bash
# React (react >= 16.8)
npm install @dev.icons/react

# Vue (vue >= 3.3)
npm install @dev.icons/vue

# Svelte (svelte >= 5)
npm install @dev.icons/svelte

# Catalog metadata, sprite, font files
npm install @dev.icons/core

# Icon font (CSS + webfont files)
npm install devicons
```

`pnpm`, `yarn`, and `bun` all work the same way.

## Component naming

The export name is derived from the **icon file** name: split on `-`, capitalize each part, join. If the result is one of the reserved names `React`, `Vue`, `Svelte`, or `Astro`, it is prefixed with `_` (alias it on import in Vue/Svelte templates, e.g. `import { _Vue as VueLogo }`). There is no automatic `Icon` suffix — `Icon` only appears when the file itself ends in `-icon`.

| Icon file | Component name |
| --- | --- |
| `react` | `_React` |
| `vue` | `_Vue` |
| `css` | `Css` |
| `nextjs` | `Nextjs` |
| `nextjs-icon` | `NextjsIcon` |
| `discord-icon` | `DiscordIcon` |
| `postgresql` | `Postgresql` |

Every icon page Markdown twin (`https://devicons.io/icons/<slug>.md`) lists the exact file and component names.

## React components

```tsx
import { _React, Nextjs, Postgresql } from "@dev.icons/react";

// Full color (default)
<_React size={32} />

// Accessible name rendered as <title>
<Postgresql size={32} alt="PostgreSQL" />

// Any SVG prop is forwarded
<Nextjs size={48} className="logo" onClick={() => console.log("clicked")} />
```

### Monochrome

Monochrome variants are separate components with the same names, exported from the `/mono` subpath. They use `currentColor`, so they inherit the surrounding text color.

```tsx
import { _React, GithubIcon } from "@dev.icons/react/mono";

<span style={{ color: "#ff4d00" }}>
  <_React size={32} />
</span>
<GithubIcon size={24} color="#111" />
```

### Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `size` | `string \| number` | `"1em"` | Sets `width` and `height` |
| `color` | `string` | `"currentColor"` | Root `fill`; visible on monochrome icons |
| `alt` | `string` | — | Rendered as an SVG `<title>` (accessible name) |
| `mirrored` | `boolean` | `false` | Flips the icon horizontally (`scale(-1, 1)`) |

All other SVG attributes (`className`, `style`, `aria-*`, event handlers) are forwarded to the root `<svg>`. Vue and Svelte components accept the same four props.

## Vue components

Vue and Svelte templates cannot use a tag that starts with `_`, so alias the reserved names on import.

```vue
<script setup>
import { _React as ReactLogo, _Vue as VueLogo } from "@dev.icons/vue";
import { GithubIcon } from "@dev.icons/vue/mono";
</script>

<template>
  <ReactLogo :size="32" />
  <VueLogo :size="32" alt="Vue" />
  <GithubIcon :size="24" />
</template>
```

## Svelte components

```svelte
<script>
  import { _React as ReactLogo, _Svelte as SvelteLogo } from "@dev.icons/svelte";
  import { GithubIcon } from "@dev.icons/svelte/mono";
</script>

<ReactLogo size={32} />
<SvelteLogo size={32} alt="Svelte" />
<GithubIcon size={24} />
```

## Plain SVG URLs (no install)

Every icon file is served as a standalone, CORS-enabled SVG:

| Variant | URL pattern |
| --- | --- |
| Color | `https://devicons.io/devicons/icons/{file}.svg` |
| Monochrome (`currentColor`) | `https://devicons.io/devicons/font/{file}.svg` |

```html
<img
  src="https://devicons.io/devicons/icons/react.svg"
  alt="React logo"
  width="48"
  height="48"
/>
```

Fetch and inline the monochrome SVG when it must follow CSS `color`:

```html
<span data-icon="postgresql"></span>

<script type="module">
  const BASE = "https://devicons.io/devicons/font";
  for (const el of document.querySelectorAll("[data-icon]")) {
    const file = el.getAttribute("data-icon");
    el.innerHTML = await (await fetch(`${BASE}/${file}.svg`)).text();
  }
</script>
```

The npm packages do **not** ship per-icon SVG files, so there is no per-icon SVG URL on jsDelivr or UNPKG.

## @dev.icons/core

`@dev.icons/core` exports the catalog of icon files with their font codepoints. It does not export SVG strings.

```ts
import { ICONS, getIcon } from "@dev.icons/core";
import type { IconRecord } from "@dev.icons/core";

// IconRecord = { name: string; codepoint: number; unicode: string; isVariant: boolean }
getIcon("react");        // { name: "react", codepoint: ..., unicode: "...", isVariant: false }
ICONS.filter((i) => !i.isVariant).length;
```

Package subpaths: `@dev.icons/core/icons.json`, `@dev.icons/core/sprite` (color SVG sprite), `@dev.icons/core/font/css`, `@dev.icons/core/font/woff2`, `@dev.icons/core/font/ttf`.

## Icon font

```css
/* npm install devicons */
@import "devicons/css";
```

```html
<i class="devicons devicons-react"></i>
<i class="devicons devicons-nextjs-icon"></i>
```

No build step? Link the stylesheet from jsDelivr (pin the version):

```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/devicons@2.3.0/dist/devicons.css" />
```

Glyphs are monochrome and follow `color` and `font-size`.

## SVG sprite

`@dev.icons/core` ships a color sprite at `dist/sprite/sprite-symbol.svg` (`@dev.icons/core/sprite`) with one `<symbol>` per icon file (`#react`, `#nextjs-icon`). Browsers block `<use href>` across origins, so copy the sprite into your own static assets and reference it same-origin:

```html
<svg width="24" height="24" role="img" aria-label="React logo">
  <use href="/sprite-symbol.svg#react"></use>
</svg>
```

Versioned download: `https://cdn.jsdelivr.net/npm/@dev.icons/core@1.3.0/dist/sprite/sprite-symbol.svg`

## Catalog metadata

`https://devicons.io/search-index.json` returns every icon entry (including deprecated ones) with these fields:

- `id`: the slug (page URL is `/icons/<id>/`)
- `name`: human-readable brand name
- `description`: one-line description (may be empty)
- `icons`: icon file names — use these for components, SVG URLs, sprite ids, and font classes
- `tags`: categories (`frontend`, `database`, `ai`, `llm`, ...)
- `aliases` (optional): alternative names users search with
- `popular`: flagship flag
- `deprecated`: skip entries where this is `true`
- `badInDark` / `badInLight`: the icon needs a contrasting backdrop on that theme
- `version` (optional): library version that added the icon

For the curated `recommended` picks per tag, see [reference/icons.md](https://devicons.io/skill/reference/icons.md).

## When to use which option

- **React / Vue / Svelte app** → `@dev.icons/<framework>` (tree-shakeable); `/mono` for single-color.
- **Astro** → `@dev.icons/react` (or vue/svelte) components rendered statically.
- **Plain HTML, Markdown, README, CMS** → `<img src="https://devicons.io/devicons/icons/<file>.svg">`.
- **Many monochrome glyphs styled by CSS** → icon font (`devicons`).
- **Many color icons on one page** → self-hosted SVG sprite from `@dev.icons/core`.
- **Tooling / codegen needing the list of files** → `@dev.icons/core` (`ICONS`) or `search-index.json`.

## Related documentation

- [Installation](https://devicons.io/docs/installation/)
- [React guide](https://devicons.io/docs/react/)
- [Vue guide](https://devicons.io/docs/vue/)
- [Svelte guide](https://devicons.io/docs/svelte/)
- [Core package](https://devicons.io/docs/core/)
- [Icon font](https://devicons.io/docs/icon-font/)
- [CDN and SVG URLs](https://devicons.io/docs/cdn/)