# with icons — full reference > with icons (https://withicons.com/, powered by Evergrow) is a free, MIT-licensed SVG icon library: 500 icons x 20 styles = 10,000 icons. Every icon is one hand-drawn skeleton on a 24x24 grid rendered by 20 style renderers, so all styles share names, grid and props. People copy icons as images, drag them into Google Slides, PowerPoint, Canva, Figma and Notion, or download SVG/PNG at any size and colour. Developers get packages for React, Vue 3, Svelte 4/5, Angular 17+, SolidJS, a `` web component, CSS icon classes, SVG sprites and plain SVG files, plus optional animations (`@withicons/motion`): 500 icons ship their own loop, hover move and "turns into" transitions, and every icon can use any of 32 presets. Website: https://withicons.com/ · Library: https://withicons.com/icons.html · Source: https://github.com/withevergrow/withicons · Publisher: Evergrow (https://withevergrow.com) · Version: 0.2.1 ## Status The npm packages under `@withicons/*` are published (version 0.2.1) and served by jsDelivr. People who don't write code can use the website's Copy/Download buttons or the SVG files on each icon page. ## Using with icons from a chat assistant No setup needed for Claude, ChatGPT, Gemini, Perplexity, Grok or any assistant that can read the web. Next to every search box on https://withicons.com/ (home, the ⌘K overlay, the library) and on https://withicons.com/ai.html, an "Ask AI" button turns what the visitor typed into a brief and opens their assistant with it pre-filled (Gemini cannot be pre-filled: the brief is copied to paste). Every brief starts by sending the assistant to the skill, https://withicons.com/skill/SKILL.md. Find the right icon (the default brief; the visitor's words and the site's own top matches are added when present): ```text First, open and follow https://withicons.com/skill/SKILL.md — the guide to "with icons" (https://withicons.com): 500 free, MIT-licensed icons, each drawn in 20 styles (line, solid, duo, gloss, engrave, blueprint, sketch, glass, kawaii, sticker, pixel, retro, luxe, bauhaus, skeuo, anime, gothic, pastel, coquette, plush), with optional animations. Look icons up with https://withicons.com/api/search?q=WORDS (it understands synonyms and typos; overview: https://withicons.com/llms.txt). Only use icon names that exist there — never invent one. MY TASK: find the best icon for what I’m making. Ask me first, in one short question, what it is and what the icon must say. Reply with: 1. Best fit: exact name + one line on why my users will read it right. 2. Up to 2 alternatives, one line each. 3. The best style for this context, and why (line or solid for UI controls; gloss, engrave, blueprint, sketch, glass, kawaii, sticker, pixel, retro, luxe, bauhaus, skeuo, anime, gothic, pastel, coquette, and plush only at 32px+). 4. Ready-to-paste code for my stack, or steps for my app — ask if you don’t know it (React, Vue, Svelte, plain HTML, or Slides, Canva, Figma, Docs). Include an accessible label. 5. A link for each pick: https://withicons.com/icons/NAME.html If you can’t open links, say so instead of guessing. What I know: names are kebab-case (trash, arrow-right, check-circle); every icon page https://withicons.com/icons/NAME.html has Copy image, SVG/PNG download and Copy SVG code. In code: after the loader script https://cdn.jsdelivr.net/npm/@withicons/classes/dist/with-loader.js (line needs no style class), or the npm packages (@withicons/react, vue, svelte, angular, solid, web). Keep it short and practical. ``` On every icon page (and in the library's icon viewer) the visitor picks a task for that icon, adds an optional "What are you making?" line, and gets a brief naming the icon, its style and page: - Code it for my app: exact code for their stack in that style, size and colour, the aria-label and tooltip wording, hover/focus/active/disabled states, one pitfall. - Build a matching set: the 4-8 library icons that belong beside it on that screen or flow, one style, size and stroke, why each, and any gap with the closest substitute. - Is this the right icon?: a verdict, what people will read it as, ambiguity or cultural issues, whether it needs a text label, and up to 3 better options. - Use it in my slides/doc: which file to grab (Copy image, SVG, or PNG at 256 or 1024 px), how to insert, recolour and resize it in their app, layout tips, and the matching guide (https://withicons.com/guides/.html). App guides send the same brief for their app. Assistants answering any of them: read the skill first, look icons up with https://withicons.com/api/search?q=, recommend real names only, link each icon's page (https://withicons.com/icons/.html), and give code to developers or step-by-step instructions for slides, docs and design tools. ## Find an icon (search) - Library search (understands meaning, aliases and synonyms: "throw away" finds trash): https://withicons.com/icons.html?q= - Remote API: https://withicons.com/api/search?q= - MCP server for AI agents: `npx -y @withicons/mcp` - CLI: `npx withicons search ""` ## Install - React: `npm i @withicons/react` - Vue 3: `npm i @withicons/vue` - Svelte 4/5: `npm i @withicons/svelte` - Angular 17+: `npm i @withicons/angular` - SolidJS: `npm i @withicons/solid` - Web component (any framework or none): `npm i @withicons/web` or `` - The web component from a CDN downloads only the icons a page shows: `cdn.js` is ~7 KB gzipped, then one small file per icon and style (a line icon is ~150 bytes gzipped). - Icon classes (`npm i @withicons/classes`, or from a CDN): `` (~6 KB gzipped) links just the CSS of the icons on the page, any mix of styles. Zero JS: `with-base.css` + `