### 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 Agent ``` -------------------------------- ### 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) [![Icons by IconMind](https://img.shields.io/badge/icons-IconMind-black)](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.