Always moving
A calm loop that says what the icon does. Great for loaders, live badges and friendly empty states.
500 icons · 20 styles · free foreverNewAnime, gothic & plush
Free icons for your website, slides & apps
Find one, copy it, done. Every icon comes in twenty styles, from clean lines to cute kawaii, anime and luxe 3D — no sign-up, no credit needed, free for anything.
Try:
bike
1/20
every style, just hanging out
- Line
- Solid
- Duo
- Gloss
- Engrave
- Blueprint
- Sketch
- Glass
- Kawaii
- Sticker
- Pixel
- Retro
- Luxe
- Bauhaus
- Skeuo
- Anime
- Gothic
- Pastel
- Coquette
- Plush
One card per style: 20 styles in five families, and every one of the 500 icons comes in all of them (10,000 ways). Use the arrow keys to move along the line, and Enter to open a style.
Pick a style
Twenty looks. Same icon.
Every one of the 500 icons is drawn in every style, so whatever mood you want, the whole set matches. Start with an everyday style; go playful for personality, studio for premium 3D, Bauhaus geometry and real materials, or storybook for anime, gothic, pastel, coquette and plush.
New Live icons
Icons that know the date.
A calendar that shows today, a clock that tells the time, a badge with your count, a battery at any level. Change the numbers and words inside, and keep every one of the 20 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
- 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 Icons that move
Icons that move. Only if you want.
Give any icon a gentle loop, a little hover reaction, or let it turn into another icon. Motion is an optional add-on, so your icons stay tiny until you ask for it.
Your device asks for less motion, so these demos stay still.
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.
Imported separately
Add motion with one extra line.
- Your icons work on their own. No animation code is added unless you ask for it.
- Want them to move? Add the motion stylesheet once, then a class on 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.
Download a PNG or SVG and drop it in like any picture. Step-by-step guides for the tools you already use:
- PowerPoint
- Google Slides
- Keynote
- Canva
- Figma
- Word & Google Docs
- Notion
- WordPress
- Webflow
- Framer
- Wix & Squarespace
- Email signatures
Copy, download or drag
Three ways to grab an icon. Try them.
Copy
Paste straight into Figma, Canva, Notion or your code.
Download
A crisp PNG for slides and docs, or an SVG that stays sharp at any size.
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. Tree-shakable, typed, zero dependencies.
On npm npm i @withicons/react, vue, svelte, angular, solid, web or classes. All packages
For AI
Your AI picks the right icon.
An MCP server and an agent skill let assistants like Claude search all 500 icons by meaning and drop them into your code.
Add a delete button to this card
with-icons · search("delete")Using trash in Line — added with an accessible label.
Ask AI
Not sure what it's called? Ask your AI.
Describe what the icon is for, in your own words. We hand Claude, ChatGPT, Gemini, Perplexity or Grok a ready brief that points it to our skill file, so it searches with icons and comes back with the best fit, two alternatives, the right style and code or steps for your app.
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 line connects your coding assistant to the with icons search (MCP) 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
Made for real work
Whatever you're making.
Teachers
A whole lesson deck in hand-drawn Sketch, so slides feel like the whiteboard.
Founders
Pitch deck, landing page and app from one icon set, so everything matches.
Marketers
Die-cut Sticker icons for social posts that stop the scroll, straight into Canva as PNG.
Finance & print
Engraved icons that sit beautifully next to serif type in reports.
Engineers
Blueprint icons for technical docs and architecture diagrams.
Product designers
Line for the UI, Solid for selected states, Duo for empty states.
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.
Are the icons really free?
Yes. All 500 icons in all 20 styles 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 click Download 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.
What's the difference between the styles?
Every icon is drawn once and comes in twenty looks. Everyday: Line (clean outlines), Solid (bold filled) and Duo (outline with a soft tint). Crafted: Gloss (puffy and shiny), Engrave (banknote-style lines), Blueprint (technical drawing) and Sketch (hand-drawn marker). Playful: Glass (frosted glass), Kawaii (cute, with a tiny face), Sticker (die-cut Y2K sticker), Pixel (pixel art) and Retro (70s sunset stripes). Studio: Luxe (premium layered 3D), Bauhaus (primary colours and pure geometry) and Skeuo (real materials and depth). Storybook: Anime (cel-shaded anime art), Gothic (cathedral stone and stained glass), Pastel (soft candy pastels), Coquette (bows, pearls and blush pink) and Plush (soft felt toys for kids).
Can the icons move?
Yes, if you want them to. The optional motion add-on gives every icon a gentle loop, a hover reaction, and smooth swaps from one icon to another (play to pause, menu to close). It is imported separately, so icons stay tiny when you don't need animation, and it respects your device's reduce-motion setting. Try it above.
Can I change the colour and size?
Yes. Pick any colour before you download, or recolour an SVG later in your design tool. 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. Prefer no install? Copy SVG code or download files from any icon page. See Developers.