Free icons: over 25,000 SVG, PNG & animated icons

Q: How do I put an icon in PowerPoint, Google Slides or Canva?

Find an icon, pick a style and colour, then press Copy image and paste it in. Or download a PNG or SVG and insert it like any picture. In PowerPoint and Keynote, SVG stays sharp at any size and you can recolour it. Our guides walk through each app step by step.

Q: Can AI agents use these icons?

Yes. Run npx withicons init to add the agent skill and the MCP server to Claude Code, Codex, Cursor, VS Code and other AI tools, or connect the remote server at https://withicons.com/mcp. Your agent then searches every icon by meaning, adds the right one to your code and can export files. There is also llms.txt for any AI that reads the web.

Pick a style

Thirty-four looks. Same icon.

Every icon comes in every style, so your whole set always matches. Not sure where to start? Tell us what you're making and we'll show the best few.

What are you making?

or browse by look

See all 34 styles

Line

Clean outlines. The safe choice for websites, apps and slides.

Great for Websites, apps, menus, toolbars

See all Line icons

Every style

All 34 looks, side by side.

Each card is one style with a few of its icons. Open one to see every icon drawn that way.

Essentials

Clean icons for apps, websites and documents.

Product & brand

For SaaS sites, launches and bold brand graphics: tiles, app icons and loud shapes.

3D & glass

Depth and shine for hero sections, decks and marketing.

Playful

Cute, colourful and fun: for kids, social posts and games.

Artistic

Illustrated looks with character: print, editorial and themed designs.

Holidays

For festivals and seasonal campaigns: Diwali, Durga Puja, Holi, Halloween, Christmas, Lunar New Year and Valentine's.

New Live icons

Icons that know the date.

50 icons that show what you type: a calendar with today's date, a clock with the time, a bell with your unread count, a battery at any level. All in 34 styles.

Type a date, a time, a count or a short label
Works in every style, from Line to Luxe
One line of HTML on a website, or download it

Try live icons

Todaythe date, always
Nowhands set to the time
Inboxa badge with your count
Batteryany level, charging or not
Weathersky and temperature
Labelyour own short word

New Animated icons

A bell rings. A heart beats. Every icon moves.

All 750 icons come with their own ready-made animation, in all 34 styles. Play it on a loop, on hover, or turn one icon into another. No code? Download a GIF for PowerPoint or Google Slides, an MP4 or a Lottie file.

Always moving

A calm loop that says what the icon does. Great for loaders, live badges and friendly empty states.

On hover

Buttons react when you point at them (or tap). The icon plays once, then rests.

Turn into another

One icon becomes the next: play to pause, menu to close, sun to moon. Click one to try it.

On your website or app

Add motion with one extra line.

Your icons stay light. No animation code is added unless you ask for it.
Want them to move? Load the motion add-on once, then add motion="loop" or a class to any icon.
Accessible by default. If someone turns on “reduce motion”, everything stays still.

On npm npm i @withicons/motion, or link it from the CDN. Motion docs

Use them anywhere

In your slides, docs and websites.

Copy an icon as an image and paste it in, or download one of 36 file formats, from PNG and SVG to PowerPoint, GIF and MP4. Step-by-step guides for the tools you already use:

All how-to guides

Copy, download or drag

Three ways to grab an icon. Try them.

1

Copy

Paste straight into Figma, Canva, Notion or your code.

2

Download

A crisp PNG for slides and docs, or an SVG that stays sharp at any size.

3

Drag

Drag the icon onto the slide below, or straight into your own app.

Drop it here

For developers

One line of code.

React, Vue, Svelte, Angular, Solid, web components and plain CSS classes, with every style. Tree-shakable, typed, zero dependencies.

On npm npm i @withicons/react, vue, svelte, angular, solid, web or classes. All packages

Developer docs

For AI agents

Your AI picks the right icon.

Connect the MCP server or agent skill, and Claude, Cursor, Codex or Copilot can search all 750 icons by meaning, then add the right one to your code or save it as a file.

Add a delete button to this card

with-icons · search("delete")

Added trash in Line, with an accessible label.

MCP & skill setup

Ask AI

Not sure what it's called? Ask your AI.

Describe what the icon is for, in your own words. One click hands Claude, ChatGPT, Gemini, Perplexity or Grok a ready-made prompt. It searches with icons and comes back with the best match, two backups, the right style, and the code or steps for your app.

what's the icon for?

See the prompt we send

For AI coding tools

Add with icons to your AI tool. Ask in plain words, get the right icon.

One command connects your coding assistant to the with icons MCP server and agent skill. Then just say “add a delete button”: it finds trash, picks a style and writes the code. How it works · Read the skill

Who it's for

Whatever you're making.

Marketers, designers, developers, teachers and founders all start from the same 750 icons, then pick the look that fits the job.

Marketers
Sticker icons that stop the scroll on social posts, and animated GIFs for slides and emails.
Designers
Line for the UI, Solid for selected states, Duo for empty states. One grid, so they all line up.
Developers
Typed packages for React, Vue and more, and Blueprint icons for docs and diagrams.
Founders
Pitch deck, landing page and app from one icon set, so everything matches.
Teachers
A whole lesson deck in hand-drawn Sketch, so slides feel like the whiteboard.
Finance & print
Engraved icons that sit beautifully next to serif type in reports.
Creators & planners
Cute Kawaii icons for journals, study notes, small shops and posts.
Game makers
Crisp Pixel icons for games, hackathons and playful web apps.
Cafés & events
Warm Retro icons for menus, posters, gigs and festival flyers.

Ideas for which style suits which job. Mix and match freely.

Questions

Good questions, short answers.

Anything else? The full FAQ has more.

What is with icons?

with icons is a free icon library by Evergrow. It has 750 icons, each drawn in 34 styles, plus live icons for dates, counts and labels (over 25,000 in all), and every icon comes with its own animation. Copy them into slides, docs and design tools, download them in 36 file formats, install them for React, Vue and more, or let your AI agent add them. Everything is free under the MIT License.

Are the icons really free?

Yes. All 750 icons in all 34 styles, animations included, are free for personal and commercial work under the MIT License. No sign-up, no payment, and you don't have to credit us (though we love it when you do).

How do I put an icon in PowerPoint, Google Slides or Canva?

Find an icon, pick a style and colour, then press Copy image and paste it in. Or download a PNG or SVG and insert it like any picture. In PowerPoint and Keynote, SVG stays sharp at any size and you can recolour it. Our guides walk through each app step by step.

Are the icons animated?

Yes. Every icon comes with its own animation that suits it: a bell rings, a heart beats, a loader spins. It works in all 34 styles. Play it on a loop or on hover, or let one icon turn into another, like play into pause. No code needed: download a GIF for PowerPoint or Google Slides, an MP4, an animated SVG or a Lottie file. On websites, the optional @withicons/motion add-on plays them with a stylesheet and a class, and keeps them still for anyone who turns on reduce motion. Try it above.

What are live icons?

Icons whose content you set: a calendar with your date, a clock with your time, a bell with your count, a battery at your level, a tag with your words. There are 50 of them, in all 34 styles. Download one for slides and docs, or add one line of HTML and a calendar shows today's date on your website. See all live icons.

What's the difference between the styles?

Every icon is drawn once and comes in 34 looks, in six groups. Essentials, for apps, websites and documents: Line (clean outlines), Solid (bold filled), Duo (outline with a soft tint and an accent colour) and Suite (enterprise colour icons). Product & brand, for SaaS sites, launches and bold brand graphics: Bento (icons in tinted tiles), Dock (app-icon tiles), Brutal (bold neo-brutalism) and Bauhaus (primary colours and pure geometry). 3D & glass, for hero sections and decks: Clay (soft 3D clay), Glass (soft frosted glass), Liquid (clear refractive glass), Chrome (liquid metal), Soft 3D (soft studio-lit 3D), Luxe (premium layered 3D) and Skeuo (real materials and depth). Playful, for kids, social posts and games: Kawaii (cute, with a tiny face), Plush (soft felt toys), Sticker (die-cut Y2K sticker), Gloss (puffy and shiny), Pastel (soft candy pastels), Pixel (pixel art) and Retro (70s sunset stripes). Artistic, for print and themed designs: Sketch (hand-drawn marker), Engrave (banknote-style lines), Blueprint (technical drawing), Anime (cel-shaded anime art), Gothic (cathedral stone and stained glass) and Coquette (bows, pearls and blush pink). Holidays, for festivals and seasonal campaigns: Utsav (Indian festive craft), Rangoli (Diwali, Durga Puja and Holi), Halloween (spooky-cute), Christmas (cosy, with snow), Lunar New Year (lucky red and gold) and Valentine (cute hearts and blush). Not sure? Line is the safe choice for most work, or tell us what you're making.

Can I change the colour and size?

Yes. Pick any colour before you download, or recolour an SVG later in your design tool. The colourful styles also come with more than 20 ready-made palettes for every icon. SVGs stay perfectly sharp at every size; PNGs come in sizes from 64 to 1024 pixels.

Do I need to credit with icons?

No credit is required. The MIT License only asks that the license text travels with the source code if you redistribute the icon files themselves as a library. Read the license in plain English.

I'm a developer. Is there an npm package?

Yes. Packages for React, Vue, Svelte, Angular, Solid, web components and CSS icon classes are on npm under @withicons, for example npm i @withicons/react. They are typed, tree-shakable and have zero dependencies. Prefer no install? Use the CDN, copy SVG code or download files from any icon page. See Developers.

Can AI agents use these icons?

Yes. Run npx withicons init to add the agent skill and the MCP server to Claude Code, Codex, Cursor, VS Code and other AI tools, or connect the remote server at https://withicons.com/mcp. Your agent then searches every icon by meaning, adds the right one to your code and can export files. There is also llms.txt for any AI that reads the web. See For AI.

Free icons for your website, slides & apps