### Install @iconmind/icons for raw SVG
Source: https://iconmind.dev/docs/installation
Installs the Plain SVG package containing individual icon files, `dist/metadata.json`, and `dist/sprite.svg`.
```bash
npm i @iconmind/icons
```
--------------------------------
### Set up and build icons
Source: https://iconmind.dev/docs/contributing
Clone the repository, install dependencies, and run the build, validation, and duplicate-check commands for icon submissions.
```bash
git clone https://github.com/iconmind/iconmind.git
cd iconmind && pnpm install
# add your icon to a batch file in scripts/draw/icons/, then:
pnpm icons:build # compiles every declaration into its six SVG cells
pnpm icons:validate # 30+ geometry rules, under 5 seconds
pnpm icons:duplicates # is it a twin of something we have?
```
--------------------------------
### Installation
Source: https://iconmind.dev/docs/react-native
Install the package and its peer dependency react-native-svg.
```APIDOC
## Installation
### Description
Install the @iconmind/react-native package and its peer dependency react-native-svg.
### Command
```
npm i @iconmind/react-native react-native-svg
```
### Notes
- `react-native-svg` is a peer dependency and must be installed by your app.
- For Expo projects, use `npx expo install react-native-svg`.
```
--------------------------------
### Install IconMind with npx shadcn add
Source: https://iconmind.dev/docs/shadcn
Run this command in a shadcn/ui project to add the IconMind registry item. It installs @iconmind/react and writes components/ui/iconmind.tsx.
```bash
npx shadcn@latest add https://iconmind.dev/r/iconmind.json
```
--------------------------------
### Import IconMind bare entry point
Source: https://iconmind.dev/docs/svg
Import the bare entry point to get version and counts. It costs a few hundred bytes.
```javascript
import { version, counts } from "@iconmind/icons";
```
--------------------------------
### Install IconMind Flutter package
Source: https://iconmind.dev/docs/flutter
Adds the iconmind_flutter package to a Flutter project using the pub add command.
```bash
flutter pub add iconmind_flutter
```
--------------------------------
### Install iconmind/blade-iconmind via Composer
Source: https://iconmind.dev/docs/laravel
Install the IconMind Blade package with Composer. This is the first step to use IconMind icons in Laravel.
```bash
composer require iconmind/blade-iconmind
```
--------------------------------
### Install @iconmind/react-native and react-native-svg
Source: https://iconmind.dev/docs/react-native
Install the package and its peer dependency. react-native-svg requires native modules, so it must be installed and pod-installed by your app. For Expo projects, use `npx expo install react-native-svg`.
```bash
npm i @iconmind/react-native react-native-svg
```
--------------------------------
### Add iconmind MCP server to Claude
Source: https://iconmind.dev/docs/installation
Adds the MCP server for AI assistants. Runs offline, bundles icon data, and starts quickly.
```bash
claude mcp add iconmind -- npx -y @iconmind/mcp
```
--------------------------------
### Use IconMind from CDN
Source: https://iconmind.dev/docs/svg
Use the sprite or a single icon from jsDelivr CDN without installing. Pin a version in production; unpinned follows latest release.
```html
```
--------------------------------
### Import and render icons in React Native
Source: https://iconmind.dev/docs/react-native
Import the Agent and VectorDatabase icons from @iconmind/react-native. The icons accept props like variant, weight, color, and size. The example shows default usage and a customized icon.
```jsx
import { Agent, VectorDatabase } from "@iconmind/react-native";
```
--------------------------------
### Import and use Preact icons
Source: https://iconmind.dev/docs/preact
Shows how to import and render icons from the @iconmind/preact package, including usage with props.
```APIDOC
## Import and use Preact icons
### Description
Import any icon as a named export from `@iconmind/preact` and render it as a Preact component. The package targets Preact directly, no compat layer required.
### Usage Example
```jsx
import { Agent, VectorDatabase } from "@iconmind/preact";
```
### Props
| Prop | Default | What it does |
|------|---------|--------------|
| `size` | `24` | Width and height, in px or any CSS length |
| `color` | `currentColor` | Stroke colour |
| `variant` | `"outline"` | `"outline"` or `"duotone"` |
| `weight` | `"regular"` | `"thin"`, `"regular"` or `"bold"` — each is its own drawing |
| `strokeWidth` | per weight | Fine adjustment; picking a weight redraws instead |
| `absoluteStrokeWidth` | `false` | Keeps the stroke looking the same weight as size changes |
Any other props are spread onto the `` element after the defaults, so they can be overridden.
### Accessibility
Icons are `aria-hidden` by default. Pass `aria-label="…"` and the icon becomes `role="img"` with that label instead.
### Tree shaking
ESM only, `sideEffects: false`, one entry point per icon — `@iconmind/preact/icons/agent` works. If your whole app is 4 KB of Preact, three icons adding ~600 bytes gzipped keeps it in proportion.
```
--------------------------------
### Server components
Source: https://iconmind.dev/docs/react
Describes how icons work in server components with zero client JavaScript and deterministic output.
```APIDOC
## Server components
### Description
Icons have no hooks, no state, and no browser APIs. They render on the server and ship zero bytes of client JavaScript in a Next.js App Router page. Output is deterministic — no `Math.random()`, no `useId()` — so hydration never mismatches.
```
--------------------------------
### Icon Component Usage
Source: https://iconmind.dev/docs/solid
Shows how to import and use icon components from @iconmind/solid, including passing props and using signals for reactive size.
```APIDOC
## Icon Component Usage
### Description
Import and render icon components from @iconmind/solid. Each icon is a named export and can be used as a SolidJS component.
### Import
```js
import { Agent, VectorDatabase } from "@iconmind/solid";
```
### Usage
```jsx
```
### Props
| Prop | Default | What it does |
|------|---------|--------------|
| `size` | `24` | Width and height, in px or any CSS length |
| `color` | `currentColor` | Stroke colour |
| `variant` | `"outline"` | `"outline"` or `"duotone"` |
| `weight` | `"regular"` | `"thin"`, `"regular"` or `"bold"` — each is its own drawing |
| `strokeWidth` | per weight | Fine adjustment; picking a weight redraws instead |
| `absoluteStrokeWidth` | `false` | Keeps the stroke looking the same weight as size changes |
### Reactive Props
Props are read through getters, so passing signals works the way Solid expects — change `size` and only the two attributes that depend on it update, not the component.
```js
const [size, setSize] = createSignal(24);
```
### Spread
Anything else you pass spreads onto the ``.
### Tree shaking
ESM only, `sideEffects: false`, one entry point per icon — `@iconmind/solid/icons/agent` works. Importing three icons costs three icons.
### Accessibility
Icons are `aria-hidden` by default. Pass `aria-label="…"` and the icon becomes `role="img"` with that label instead.
```
--------------------------------
### Import and use icons
Source: https://iconmind.dev/docs/react
Shows how to import named icon components from @iconmind/react and render them with optional props.
```APIDOC
## Import and use icons
### Description
Import any icon as a named export from @iconmind/react and render it as a React component. Icons accept props to customize size, color, variant, weight, and more.
### Usage Example
```jsx
import { Agent, VectorDatabase } from "@iconmind/react";
```
### Props
| Prop | Default | What it does |
|------|---------|--------------|
| `size` | `24` | Width and height, in px or any CSS length |
| `color` | `currentColor` | Stroke colour |
| `variant` | `"outline"` | `"outline"` or `"duotone"` |
| `weight` | `"regular"` | `"thin"`, `"regular"` or `"bold"` — each is its own drawing |
| `strokeWidth` | per weight | Fine adjustment (1.5 / 2 / 2.5); picking a weight redraws instead |
| `absoluteStrokeWidth` | `false` | Keeps the stroke looking the same weight as size changes |
Any other props are spread onto the `` element after the defaults, so you can override any of them, including `viewBox`.
### absoluteStrokeWidth
At `size={48}` a 2px stroke scales with everything else and reads as 4px. With this on, the stroke is divided by the scale factor so it looks the same at every size.
```
--------------------------------
### shadcn/ui integration
Source: https://iconmind.dev/docs/react
Shows how to add a typed Icon component using the shadcn CLI and how to use it.
```APIDOC
## shadcn/ui integration
### Description
If your project uses the shadcn CLI, one command adds a typed ` ` wrapper and the package.
### Command
```bash
npx shadcn@latest add https://iconmind.dev/r/iconmind.json
```
### Usage Example
```jsx
```
```
--------------------------------
### Use IconMind widget with variants and weights
Source: https://iconmind.dev/docs/flutter
Imports the package and shows two IconMind widget usages: a basic icon and one with duotone variant, bold weight, custom size, and color.
```dart
import 'package:iconmind_flutter/iconmind_flutter.dart';
IconMind(IconMindIcons.agent)
IconMind(IconMindIcons.vectorDatabase,
variant: IconMindVariant.duotone,
weight: IconMindWeight.bold,
size: 32, color: Colors.deepPurple)
```
--------------------------------
### Icon Component Usage
Source: https://iconmind.dev/docs/astro
Shows how to import and use icon components from @iconmind/astro in an Astro project.
```APIDOC
## Icon Component Usage
### Description
Import and render icon components from @iconmind/astro. Each icon is an .astro component that renders inline SVG at build time.
### Import
```
import { Agent, VectorDatabase } from "@iconmind/astro";
```
### Usage
```
```
### Props
| Prop | Default | What it does |
|------|---------|--------------|
| `size` | `24` | Width and height, in px or any CSS length |
| `color` | `currentColor` | Stroke colour |
| `variant` | `"outline"` | `"outline"` or `"duotone"` |
| `weight` | `"regular"` | `"thin"`, `"regular"` or `"bold"` — each is its own drawing |
| `strokeWidth` | per weight | Fine adjustment; picking a weight redraws instead |
| `absoluteStrokeWidth` | `false` | Keeps the stroke looking the same weight as size changes |
Any other attributes (e.g., `class`, `aria-label`) are passed to the `` element.
### Per-icon imports
```
import Agent from "@iconmind/astro/icons/agent.astro";
```
### Accessibility
Icons are `aria-hidden` by default. Pass `aria-label="…"` to make the icon `role="img"` with that label.
```
--------------------------------
### Import and use Solid icons
Source: https://iconmind.dev/docs/solid
Import named icon components from @iconmind/solid and render them. Supports props like variant, weight, color, and size.
```jsx
import { Agent, VectorDatabase } from "@iconmind/solid";
```
--------------------------------
### Import IconMind metadata
Source: https://iconmind.dev/docs/svg
Import the full metadata database (names, tags, categories, relationships) from the metadata subpath. It is ~180 KB gzipped, suitable for build scripts, docs sites, or search indexes, not for client bundles.
```javascript
import { getIcon, iconsIn, categories } from "@iconmind/icons/metadata";
getIcon("agent"); // one icon, aliases resolved
iconsIn("mcp"); // every icon in a category
categories; // categories with counts
```
--------------------------------
### MCP configuration for Cursor and Windsurf
Source: https://iconmind.dev/docs/mcp
Configuration for Cursor and Windsurf, which read the JSON from `mcp.json`. Uses the same command and arguments as other clients.
```json
{
"servers": {
"iconmind": { "type": "stdio", "command": "npx", "args": ["-y", "@iconmind/mcp"] }
}
}
```
--------------------------------
### Render a contact sheet
Source: https://iconmind.dev/docs/contributing
Render a subset of icons at 88, 24, and 16px to judge compositions.
```bash
ONLY="my-icon its-siblings" npx tsx scripts/review/sheet.mts outline-regular out.png
```
--------------------------------
### IconMind file structure
Source: https://iconmind.dev/docs/svg
Shows the file layout of the package: source SVG files, metadata JSON, and sprite SVG.
```text
icons//.svg the source, one file per icon
dist/metadata.json names, tags, categories, relationships
dist/sprite.svg every icon as a
```
--------------------------------
### Manual MCP configuration for Claude
Source: https://iconmind.dev/docs/mcp
Manual configuration for Claude's MCP client. Place this JSON in the appropriate config file. No API key or account needed.
```json
{
"mcpServers": {
"iconmind": { "command": "npx", "args": ["-y", "@iconmind/mcp"] }
}
}
```
--------------------------------
### Import and render Svelte icons
Source: https://iconmind.dev/docs/svelte
Import and render icons as Svelte components. Each icon is a named export; pass props like variant, weight, color, and size.
```svelte
```
--------------------------------
### Usage
Source: https://iconmind.dev/docs/react-native
Import and render icons using the @iconmind/react-native package.
```APIDOC
## Usage
### Description
Import icons from the package and render them as React components.
### Import
```
import { Agent, VectorDatabase } from "@iconmind/react-native";
```
### Example
```
```
### Per-icon imports
```
import Agent from "@iconmind/react-native/icons/agent";
```
```
--------------------------------
### Import and render icons from @iconmind/react
Source: https://iconmind.dev/docs/installation
Use for React and other framework packages. Shows the shared import and component usage with `variant`, `weight`, and `size` props.
```jsx
import { Agent, VectorDatabase } from "@iconmind/react";
```
--------------------------------
### Run code checks
Source: https://iconmind.dev/docs/contributing
Run type checking, tests, and icon validation before contributing code.
```bash
pnpm typecheck && pnpm test && pnpm icons:validate
```
--------------------------------
### Use the Icon component
Source: https://iconmind.dev/docs/shadcn
Import the Icon component from the generated wrapper and use it with the name prop. The name accepts a slug or component name; variant, weight, size, and className are supported.
```tsx
import { Icon } from "@/components/ui/iconmind";
```
--------------------------------
### Use the shadcn Icon component
Source: https://iconmind.dev/docs/react
After adding the wrapper, you can use the component with props like name, variant, weight, and size.
```jsx
```
--------------------------------
### MCP configuration for Codex
Source: https://iconmind.dev/docs/mcp
Configuration for Codex, placed in `~/.codex/config.toml`. Uses the same command and arguments as other clients.
```toml
[mcp_servers.iconmind]
command = "npx"
args = ["-y", "@iconmind/mcp"]
```
--------------------------------
### Props
Source: https://iconmind.dev/docs/react-native
The props accepted by all icon components in the package.
```APIDOC
## Props
### Description
The same contract as every other framework package. All props are optional unless noted.
### Parameters
- **size** (number) - Default: `24` - Width and height, in density-independent pixels.
- **color** (string) - Default: `currentColor` - Stroke colour. Pass a real colour; there is no CSS cascade to inherit from.
- **variant** (string) - Default: `"outline"` - `"outline"` or `"duotone"`.
- **weight** (string) - Default: `"regular"` - `"thin"`, `"regular"` or `"bold"` — each is its own drawing.
- **strokeWidth** (number) - Default: per weight - Fine adjustment; picking a weight redraws instead.
- **absoluteStrokeWidth** (boolean) - Default: `false` - Keeps the stroke looking the same weight as size changes.
### Notes
- On native there is no `currentColor` inheritance chain, so in practice you will always pass `color`.
- Everything else you pass lands on the root `Svg` element.
```
--------------------------------
### Import and use Astro icons
Source: https://iconmind.dev/docs/astro
Import icons from @iconmind/astro and render them as components. Supports props like variant, weight, color, and size. Icons are aria-hidden by default; pass aria-label to make them role="img".
```astro
---
import { Agent, VectorDatabase } from "@iconmind/astro";
---
```
--------------------------------
### Tree shaking
Source: https://iconmind.dev/docs/react
Explains the tree-shaking benefits of the package, including bundle sizes and ESM-only configuration.
```APIDOC
## Tree shaking
### Description
Importing only the icons you use keeps the bundle small. The package is ESM only with `sideEffects: false`, and every icon is its own entry point, so `@iconmind/react/icons/agent` works too.
### Bundle sizes
| Import | Size |
|--------|------|
| 1 icon | 520 B gzip |
| 3 icons | 660 B gzip |
| the whole set | 2.9 KB gzip |
Measured against the published package installed from npm, not the workspace copy.
```
--------------------------------
### Dynamic imports
Source: https://iconmind.dev/docs/react
Recommends using an explicit map for runtime-known icon names instead of template literals in import().
```APIDOC
## Dynamic imports
### Description
If the icon name is only known at runtime, prefer an explicit map to avoid bundling every icon.
### Example
```js
const ICONS = { agent: Agent, prompt: Prompt } as const;
```
A template literal in `import()` forces the bundler to include every possible icon. That is the usual cause of "why is my bundle 200 KB", and it is not a tree-shaking bug.
```
--------------------------------
### Svelte Icon Component
Source: https://iconmind.dev/docs/svelte
Documentation for the Svelte icon component package, including import, usage, props, and accessibility.
```APIDOC
## [Svelte] Icon Component
### Description
Icons as Svelte components, compiled by your bundler. Every icon is a named export; import only what you use.
### Import
```svelte
```
### Usage
```svelte
```
### Props
| Prop | Default | What it does |
|------|---------|--------------|
| `size` | `24` | Width and height, in px or any CSS length |
| `color` | `currentColor` | Stroke colour |
| `variant` | `"outline"` | `"outline"` or `"duotone"` |
| `weight` | `"regular"` | `"thin"`, `"regular"` or `"bold"` — each is its own drawing |
| `strokeWidth` | per weight | Fine adjustment; picking a weight redraws instead |
| `absoluteStrokeWidth` | `false` | Keeps the stroke looking the same weight as size changes |
### Additional Attributes
Anything else lands on the `` via `$$restProps` — `class`, `aria-label`, handlers.
### Per-icon Imports
Per-icon imports work too: `@iconmind/svelte/icons/agent.svelte`.
### Accessibility
Icons are `aria-hidden` by default. Pass `aria-label="…"` and the icon becomes `role="img"` with that label instead.
```
--------------------------------
### Import and use Preact icons
Source: https://iconmind.dev/docs/preact
Import icons as named exports from '@iconmind/preact' and render them as JSX components. Supports props like variant, weight, color, and size.
```jsx
import { Agent, VectorDatabase } from "@iconmind/preact";
```
--------------------------------
### Import and use IconMind React icons
Source: https://iconmind.dev/docs/react
Every icon is a named export. Import only what you use and render them as JSX components. Props like color, strokeWidth, className, and aria-label can be passed directly.
```jsx
import { Agent, VectorDatabase } from "@iconmind/react";
```
--------------------------------
### Use Solid signals for size
Source: https://iconmind.dev/docs/solid
Pass a signal value to the size prop to make the icon reactive. Only attributes depending on size update when it changes.
```jsx
const [size, setSize] = createSignal(24);
```
--------------------------------
### Use IconMind with Iconify
Source: https://iconmind.dev/docs/svg
Use IconMind icons via Iconify by adding the iconify class and data-icon attribute with the iconmind prefix.
```html
```
--------------------------------
### Use IconMind icons as Blade components
Source: https://iconmind.dev/docs/laravel
Use IconMind icons as Blade components with the x-im- prefix. The bare name is the default outline regular variant; suffixes like -duotone and -outline-bold select other variants. Tailwind classes can be passed via the class attribute.
```blade
```
--------------------------------
### Import icon component directly
Source: https://iconmind.dev/docs/shadcn
For icons known at build time, import the component directly from @iconmind/react to allow tree-shaking. Both forms share the same props.
```tsx
import { AgentRun } from "@iconmind/react";
```
--------------------------------
### Dynamic import icon map
Source: https://iconmind.dev/docs/react
When the icon name is only known at runtime, use an explicit map to keep tree shaking effective. A template literal in import() would force the bundler to include every icon.
```ts
const ICONS = { agent: Agent, prompt: Prompt } as const;
```
--------------------------------
### Use @svg directive and svg() helper
Source: https://iconmind.dev/docs/laravel
Use the @svg directive and the svg() helper to render icons. The svg() helper returns an object that can be converted to HTML with ->toHtml().
```blade
@svg('im-agent', 'w-6 h-6')
{{ svg('im-agent-duotone')->toHtml() }}
```
--------------------------------
### Use IconMind sprite
Source: https://iconmind.dev/docs/svg
Use the sprite SVG with a element referencing a symbol by its slug prefixed with 'im-'.
```html
```
--------------------------------
### Attribution badge for IconMind
Source: https://iconmind.dev/docs/react
Optional credit line and badge for IconMind. No attribution is required, but you can include a line or a badge if you wish.
```markdown
Icons by [IconMind](https://iconmind.dev)
[](https://iconmind.dev)
```
--------------------------------
### Rule for assistants without MCP support
Source: https://iconmind.dev/docs/mcp
A one-line rule for assistants that cannot run an MCP server, placed in a rules file like `.cursorrules`, `CLAUDE.md`, or `AGENTS.md`. It instructs the assistant to use IconMind and never invent icon names, directing it to search the list at https://iconmind.dev/llms.txt.
```markdown
Icons: use IconMind (@iconmind/react, @iconmind/vue, iconmind_flutter …). Never invent an icon name — every valid name is listed at https://iconmind.dev/llms.txt; search it, or ask the user, before importing.
```
--------------------------------
### Use sprite.svg symbol with
Source: https://iconmind.dev/docs/installation
Uses a symbol from the sprite.svg file with the icon ID `im-agent`.
```html
```
--------------------------------
### IconMindIcons
Source: https://iconmind.dev/docs/flutter
The IconMindIcons class provides compile-time constant identifiers for each icon. These constants are used as the first argument to the IconMind widget.
```APIDOC
## IconMindIcons.icon
### Description
A compile-time constant identifier for each icon. Icons are tree-shaken: only those referenced are included in the final app bundle.
### Method
Constant
### Endpoint
IconMindIcons.
### Parameters
- **iconName** (String) - Required - The name of the icon, e.g., `agent`, `vectorDatabase`. Names that collide with Dart keywords use a trailing underscore, e.g., `class_`.
### Example
```dart
IconMind(IconMindIcons.agent)
IconMind(IconMindIcons.class_)
```
```
--------------------------------
### Inline IconMind SVG
Source: https://iconmind.dev/docs/svg
Template for inlining an icon SVG. Icons inherit currentColor, so color comes from CSS.
```html
```
--------------------------------
### IconMind constructor
Source: https://iconmind.dev/docs/flutter
The IconMind widget is the main API for displaying icons in Flutter. It accepts an icon identifier and optional parameters for variant, weight, size, color, stroke width, and semantic label.
```APIDOC
## IconMind(IconMindIcons.icon)
### Description
Constructs an IconMind widget that paints a vector icon on a CustomPaint. The icon geometry is preserved as real strokes, not an icon font, so duotone variants and weights are supported.
### Method
Constructor
### Endpoint
IconMind(IconMindIcons icon, {IconMindVariant variant, IconMindWeight weight, double size, Color color, double strokeWidth, bool absoluteStrokeWidth, String semanticLabel})
### Parameters
- **icon** (IconMindIcons) - Required - The icon to display.
- **variant** (IconMindVariant) - Optional - The variant of the icon: `IconMindVariant.outline` or `IconMindVariant.duotone`. Default is `outline`.
- **weight** (IconMindWeight) - Optional - The stroke weight: `IconMindWeight.thin`, `.regular` or `.bold`. Default is `regular`.
- **size** (double) - Optional - Width and height in logical pixels. Default is 24.
- **color** (Color) - Optional - Stroke colour. Icons follow the ambient `IconTheme` if not specified.
- **strokeWidth** (double) - Optional - Fine adjustment for stroke thickness; picking a weight is the intended control.
- **absoluteStrokeWidth** (bool) - Optional - If `true`, keeps stroke thickness constant as size changes. Default is `false`.
- **semanticLabel** (String) - Optional - Announced by screen readers; icons are decorative without it.
### Example
```dart
IconMind(IconMindIcons.agent)
```
```dart
IconMind(IconMindIcons.vectorDatabase,
variant: IconMindVariant.duotone,
weight: IconMindWeight.bold,
size: 32, color: Colors.deepPurple)
```
```
=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.