Questions, answered.

Yes. Every icon is free for personal and commercial use under the MIT licence. There’s no paid tier, no account and no watermark.

No. Open the library, click an icon, and copy or download it. That’s all.

500 icons, each in 20 styles: 10,000 icons in total. Every style uses the same names and the same 24 × 24 grid.

with icons is made and maintained by Evergrow. Read our story.

Yes. Requests will open on our GitHub at launch. Before asking, search with a few different words: icons have dozens of aliases, so “bin”, “delete” and “throw away” all find trash.

Use SVG when your app accepts it (PowerPoint, Word, Canva, Figma, websites): it stays sharp at any size. Use PNG for Google Slides, Google Docs, Notion and email. Pick a PNG at least twice the size you’ll show it. See the guides.

The easiest way is to pick a colour in the library before you copy or download. SVGs can also be recoloured in apps like PowerPoint and Figma (Canva recolours the filled styles: Solid, Gloss, Retro and Pixel), and on websites with the CSS colour property.

It’s a PNG shown bigger than it was downloaded. Download a larger PNG (512 or 1024 px), or use the SVG.

You probably used a screenshot, a JPG or an MP4: those can’t be see-through. Our PNG downloads have a see-through background, so download the PNG again (or a GIF for a moving icon).

Google Slides: download a PNG and use Insert › Image › Upload from computer. PowerPoint: download an SVG and use Insert › Pictures › This Device. Full steps: Google Slides, PowerPoint.

Yes. Pick your colour on the icon’s page, download the SVG and upload it in Canva’s Uploads panel. Filled styles (Solid, Gloss, Retro, Pixel) can also be recoloured inside Canva; outline styles keep the colour you chose here. See the Canva guide.

In apps and websites, 16–24 px next to text. On slides, 48–128 px. For print, use SVG so size never matters. Keep all icons in one design the same size.

Yes. Download the SVG for perfect sharpness at any size, from business cards to banners.

Slides and documents: PNG (or the ready PowerPoint slide or Word document). Design tools and websites: SVG. Moving icons: GIF for slides and email, Animated SVG for websites, Lottie for apps, MP4 for video. Which file should I use? explains every format.

Yes, almost every download is see-through: PNG, SVG, WebP, AVIF, PDF, APNG, Animated SVG, Lottie and the PowerPoint and Word files. GIF is see-through with hard edges, so choose the colour it will sit on. JPG, MP4 and EPS can’t be see-through: they sit on white, or on the background colour you pick. See-through backgrounds, explained.

Yes, with the SVG or the ready PowerPoint slide, in PowerPoint for Microsoft 365, 2019 or newer. Select the icon and choose Graphics Format › Graphics Fill. For icons with several colours, choose Convert to Shape on the same tab and colour each piece with Shape Fill. PNG, GIF and MP4 files are pictures, so pick the colour before you download.

Yes. Pick a motion on the icon’s page, then download an MP4 or WebM video, a GIF, an Animated SVG, or a Lottie file for iPhone, Android and web apps. How to animate an icon.

Yes. Download the favicon pack (every size a website needs, plus the lines to paste), an ICO file, an iOS imageset for Xcode or an Android VectorDrawable.

Universal styles (Line, Solid and Duo) are clear at small sizes and made for interfaces. Creative styles (Gloss, Engrave, Blueprint and Sketch) are full of detail and look best at 32 px and larger, on posters, landing pages and illustrations. Playful styles (Glass, Kawaii, Sticker, Pixel and Retro) bring their own cheerful colours, for social posts, stickers, kids’ and hobby projects and anything that should feel fun. Studio styles (Luxe, Bauhaus and Skeuo) are art-directed and premium: layered 3D, Bauhaus geometry and real materials, for hero sections, app tiles and brand moments at 48 px and up. Storybook styles (Anime, Gothic, Pastel, Coquette and Plush) are tiny illustrations: anime, Gothic, pastel, coquette and plush looks for games, kids’ apps, beauty and lifestyle brands, at 48 px and up.

If unsure, choose Line. Use Solid for selected or active states and Duo for a softer, friendlier feel. Save the creative, playful, studio and storybook styles for big, eye-catching moments.

Yes. The outline follows the colour you pick, like every other style. The extra colours (blush, stripes, frost, gold trim, Bauhaus primaries, satin bows, stained glass and so on) have their own defaults, and on a website each one is a CSS variable you can change. Pick a palette in the icon editor to recolour them all at once.

Yes, they share one grid, so they line up perfectly. A common pattern is Line for normal buttons and Solid for the selected one. Avoid mixing many styles in the same row.

Yes. Every icon has its own gentle animation (a bell rings, a heart beats, a loader spins), plus 32 other ways to move and transitions that turn one icon into another, like play into pause. They work in every style. Animate an icon.

No. Open any icon, go to Customize › Motion, pick how it moves and download an Animated SVG for your website builder or Notion, or a GIF for your slides. Developers can use the optional @withicons/motion package.

Yes. Download the icon as a GIF (“GIF for slides” on any icon’s Customize panel or on the animated icons page) and insert it like a picture: it plays when you present in PowerPoint, Google Slides and Keynote. Slide apps show SVG files as still pictures, so use the GIF there. One moving icon per slide is plenty.

Animated SVGs and the motion package stop automatically when someone has turned on “reduce motion” in their device settings. In slides, prefer calm effects (fade, pulse) over spins and shakes.

Yes, in client work, products, apps, ads and merchandise. See the licence in plain words.

No. Credit is never required for using the icons in your work. If you redistribute the icon files themselves, include the MIT licence text.

You can, but anyone else can use the same icon, so it won’t be unique and may be hard to trademark. Use it as a starting point and customise it.

Yes. Change colours, thickness, shapes, anything.

Yes: @withicons/react, vue, svelte, angular and solid, plus a web component (@withicons/web) and CSS icon classes (@withicons/classes), all on npm. For example, npm i @withicons/react. Setup for each one is on the developer page.

Add one stylesheet and write <i class="with with-home"></i>. No JavaScript needed. See the HTML guide.

Yes. Icons use currentColor, so they take the colour of the text around them and switch with your theme automatically.

Icons are hidden from screen readers by default (they’re usually next to text). Give one a title or label when it carries meaning on its own, and put aria-label on icon-only buttons.

Yes. Connect the MCP server (npx -y @withicons/mcp) to Claude, Cursor, VS Code, Windsurf and others, and they can search icons by meaning and insert the real SVG. Set it up.

Plain files that describe the whole library for AI models and scripts: llms.txt is a short overview, llms-full.txt lists every icon, and icons.json is machine-readable metadata.