coolicons changelog

version

5.3.0 → 5.4.0

website_url

https://coolicons.cool → https://coolicons.cool/?ref=mcp-registry

version

5.2.0 → 5.3.0

file

absent → published

https://coolicons.cool/llms.txt

+ # coolicons+ > Open source icon set with 1,324 icons in five styles and three corner radii (sharp, regular, round), drawn on a 24 by 24 grid with a 2 px stroke. MIT license. Packages for React, Vue and plain SVG.+ Icon names are fixed and listed in full at https://coolicons.cool/llms-full.txt. Never guess a name. Look it up there or in the installed package. If no icon fits, say so instead of using a similar one.+ The newest release on npm is 5.2.0. This list can already contain icons of the next release. If a name is missing in the installed package, it comes with the next version.+ ## Install+ ```sh+ npm install @coolicons/react+ npm install @coolicons/vue+ npm install @coolicons/svg+ ```+ `@coolicons/react` and `@coolicons/vue` (Vue 3) have one component per icon. `@coolicons/svg` has every icon as a file at `@coolicons/svg/<style>/<radius>/<name>.svg`, for example `@coolicons/svg/line/regular/house.svg`.+ ```jsx+ import { House } from "@coolicons/react";+ <House size={20} />+ ```+ ```vue+ <script setup>+ import { House } from "@coolicons/vue";+ </script>+ <template>+   <House :size="20" />+ </template>+ ```+ ## Styles and radii+ Styles: `line`, `duocolor`, `duotone`, `fill`, `bulk`. Radii: `sharp`, `regular`, `round`. The package root is Line with Regular corners. Every other combination has its own entry, and only imported icons end up in the bundle:+ ```js+ import { House } from "@coolicons/react";+ import { Folder } from "@coolicons/react/fill";+ import { Bell } from "@coolicons/react/bulk/round";+ ```+ Icons use `currentColor`. Props: `size` (default 24), `strokeWidth` (default 2, Line, Duocolor and Duotone only) and `title`, which adds a `<title>` and `role="img"`. Without a title the icon is hidden from screen readers. All other attributes go to the `<svg>` element.+ ## Names+ Names are lowercase English words joined by hyphens, like `file-plus-corner`. Components use the same words in PascalCase, like `FilePlusCorner`, and are also exported with an `Icon` suffix, like `FilePlusCornerIcon`. Use the suffix for names that JavaScript, browsers or frameworks already use: `ActivityIcon`, `BluetoothIcon`, `ClipboardIcon`, `CodeIcon`, `ComponentIcon`, `FileIcon`, `FontIcon`, `FunctionIcon`, `GamepadIcon`, `HistoryIcon`, `ImageIcon`, `InfinityIcon`, `KeyboardIcon`, `LabelIcon+ To render an icon from a string, use `CooliconsIcon` from `@coolicons/react/dynamic`: `<CooliconsIcon name="house" variant="fill" radius="round" />`.+ ## shadcn/ui+ Single icons install through the shadcn CLI as React components without dependencies: `npx shadcn@latest add @coolicons/calendar-event`. Put the style and the corners in front of the name, like `@coolicons/fill/calendar-event` or `@coolicons/bulk/round/calendar-event`. coolicons is listed in the shadcn registry directory, so `@coolicons` needs no entry in `components.json`. Every item also has a full URL, like `https://coolicons.cool/r/calendar-event.json`.+ ## Coding agents+ The MCP server `@coolicons/mcp` resolves names, SVG source and imports without guessing. Add it with `claude mcp add coolicons -- npx -y @coolicons/mcp` or as the stdio command `npx -y @coolicons/mcp` in any other client. Its tools are `search_icons`, `get_icon`, `get_usage` and `describe_set`. Without MCP, `npx @coolicons/cli search <words>` lists matching names and `npx @coolicons/cli show <name> --style fill` prints the SVG.+ ## Docs+ - [Getting started](https://coolicons.cool/docs/getting-started): An open source icon set in five styles and three corner radii. Install it for React, Vue or SVG, or let your agent do it.

version

5.0.0-beta.2 → 5.2.0