Browse icons

a 4-minute guide

Which file should I use?

Short answer

Slides and documents: PNG. Design tools and websites: SVG. Moving icons: GIF for slides and email, Animated SVG for websites, Lottie for apps, MP4 for video.

Time
4 min
Formats
36 to choose from
Where
Every icon page
Cost
Free

Where is your icon going?

Jump to your answer. Every format is in the Download area under the preview on each icon’s page, in the colour, style and size you chose.

Slides & documents

A see-through PNG goes into every slide and document app there is. If your app takes SVG, that’s even better: it stays sharp and you can recolour it there.

Best pick

PNG at 512 px

Works everywhere, with a see-through background. Use 1024 px if the icon fills the slide, 256 px for icons next to text.

See-through
  • PowerPoint, Word (Microsoft 365)SVGPowerPoint slideWord documentSVG stays sharp and changes colour inside Office. The PowerPoint slide and Word document are ready-made files: open one, copy the icon, paste it into your own.
  • Google Slides, Google DocsPNGGoogle’s apps don’t take SVG files, so use a PNG.
  • Keynote, PagesPNGPDFA 1024 px PNG works in every version. A PDF stays sharp at any size.
  • Notion, email, chatPNGSmall squares: 256 px is plenty. Email signatures: 64 px.
  • Printed handoutsPDFA vector PDF prints razor sharp at any size.
  • A form that refuses PNGJPGJPG has no see-through background, so pick the colour it will sit on first.
  • Choosing a look with your teamAll-styles deckOne deck with this icon in every style, side by side.

Design tools

Design tools love vectors. An SVG arrives as real shapes you can resize, recolour and edit.

Best pick

SVG

Sharp at any size, with your colours built in. In Figma you can even skip the file: copy the SVG and paste it on the canvas.

See-through
  • Figma, Sketch, FramerSVGDrag the file in, or paste the copied SVG. It becomes editable vector layers.
  • CanvaSVGPNGUpload the SVG. Canva recolours the filled styles; for outline styles, pick the colour before you download.
  • Illustrator, Affinity, InDesignPDFSVGBoth open as clean vectors. PDF is the safest for print layouts.
  • Older print and sign-making toolsEPSOnly when they ask for EPS. It has no see-through parts, so it sits on your background colour.
  • Handing off to developersPNG setSVG for codeThe PNG set has 1x to 4x with a README. The SVG for code keeps colours changeable with CSS.

Websites & apps

On the web, SVG is the smallest and sharpest file you can use. Developers can grab a ready component instead of a file.

Best pick

SVG

Upload it to your site builder like any image. Tiny, sharp on every screen, see-through.

See-through
  • Webflow, Framer, Wix, SquarespaceSVGWebPSVG where it’s accepted. Where it isn’t, WebP is a small, see-through picture.
  • Faster pagesWebPAVIFSmaller than PNG and still see-through. AVIF is the smallest, if your browser can make it.
  • The little icon in the browser tabFavicon packICOThe favicon pack has every size plus the lines to paste into your page.
  • iPhone and iPad appsiOSDrag the folder into Xcode. A vector that tints like Apple’s own symbols.
  • Android appsAndroidDrop the file into Android Studio. Sharp on every screen, no PNGs needed.
  • Your own codeHTMLReactVueSvelteAngularReact NativeCSSReady components and snippets. See the developer docs.

Animation

Pick a motion (or a Turn into switch) first, then the file that plays where you need it. The moving formats are compared further down.

Best pick

GIF

Plays almost everywhere: PowerPoint, Google Slides, Keynote, email, Slack, Notion. Pick the background colour it will sit on.

See-through, hard edges
  • Websites and NotionAnimated SVGOne tiny file that stays sharp at any size and moves on its own.
  • Apps and website buildersLottiedotLottieThe animation format apps use. Webflow, Framer and LottieFiles take dotLottie.
  • Keynote, PowerPoint, social postsMP4A short video that plays on a solid background colour of your choice.
  • Websites, with see-through edgesAPNGAnimated WebPWebMSmooth edges on any background. They play in web browsers.
  • Video editors and 3DPNG framesWebMEvery frame as a see-through PNG for After Effects, Premiere, DaVinci Resolve or Blender.

See-through backgrounds, explained

A see-through (or transparent) file has no background of its own, so the icon sits cleanly on any slide, photo or page colour. Most of our files are see-through. Three kinds of file aren’t, and one is in between.

  • See-through

    PNG, SVG, WebP, AVIF, PDF, APNG, Animated WebP, Animated SVG, Lottie, PowerPoint slide and Word document. The icon sits right on your colour.

  • Hard edges

    GIF. See-through, but soft edges are blended with a colour. Pick your slide’s colour as the background and the rim vanishes.

  • Solid background

    EPS, JPG and MP4. They always fill a box: white, unless you choose your slide’s colour first.

WebM videos are see-through when made in Chrome or Edge; other browsers record them on your background colour.

GIF, APNG, WebM, MP4 or Lottie?

They all move. The difference is where they play, and whether the background stays see-through.

  • In slides or email?GIF
  • On a website?Animated SVG
  • In an app?Lottie
  • In a video?MP4
FormatPlays inSee-throughSharp when bigFile size
Animated SVGWebsites, Notion, any web browserYesYesTiny
GIFEverywhere: slides, email, chat, NotionHard edgesNo, pick a sizeLarge
APNGWeb browsers (other apps show it standing still)YesNo, pick a sizeMedium
Animated WebPWeb browsers and appsYesNo, pick a sizeSmall
WebMWebsites, video editorsIn Chrome and EdgeNo, pick a sizeSmall
MP4Keynote, PowerPoint, social posts, video editorsNo, solid colourNo, pick a sizeSmall
LottieiPhone, Android, Flutter and web apps; After EffectsYesYesTiny
dotLottieLottieFiles, Webflow, Framer, dotLottie playersYesYesTiny
PNG framesAfter Effects, Premiere, DaVinci Resolve, Blender, game enginesYesNo, pick a sizeLarge

Moving files use the motion you picked on the icon’s Motion tab, or the switch you set up on Turn into. Not sure how? Read how to animate an icon.

In your app, step by step

PowerPoint

DownloadSVGPowerPoint slideGIFMP4

  1. Download the SVG, then choose InsertPicturesThis Device.
  2. Recolour it: select the icon, then Graphics FormatGraphics Fill.
  3. Moving icon? Insert a GIF the same way, or an MP4 with InsertVideoThis Device.
Full PowerPoint guide →

Keynote

DownloadPNGPDFMP4GIF

  1. Download a PNG at 1024 px (or a PDF) and drag it onto the slide.
  2. For a moving icon, drag in an MP4 or a GIF. Set the MP4 to loop in FormatMovie.
  3. Give the MP4 the same background colour as your slide before you download it.
Full Keynote guide →

Google Slides

DownloadPNGGIF

  1. Download a PNG at 512 px.
  2. Choose InsertImageUpload from computer, or drag the file onto the slide.
  3. Moving icon? Use a GIF: it plays when you present. Videos must come from Google Drive, so GIF is simpler.
Full Google Slides guide →

Canva

DownloadSVGPNGGIFMP4

  1. Download the SVG, then UploadsUpload files.
  2. Click the upload to add it. Filled styles change colour from the colour square in the toolbar.
  3. Moving icon? Upload a GIF or an MP4 the same way.
Full Canva guide →

Figma

DownloadSVGGIFLottie

  1. Press Copy SVG and paste on the canvas, or drag the SVG file in.
  2. It arrives as vector layers: change Stroke or Fill in the right panel.
  3. For a moving icon in a prototype, place a GIF: it plays when you present.
Full Figma guide →

Word

DownloadSVGPNGWord document

  1. Download the SVG (Word for Microsoft 365, 2019 or newer) or a PNG, then InsertPicturesThis Device.
  2. Or download the ready Word document, open it and copy the icon into yours.
  3. Recolour an SVG with Graphics FormatGraphics Fill.
Full Word guide →

Every format, in one list

All 36 formats in the Download area, in the same words you’ll see there.

Pictures

Everyday images that work almost everywhere.

PNG.png
The safe choice for slides, docs, chat and design tools: sharp at any size you pick, with a see-through background. See-through
WebP.webp
For websites: like PNG with a see-through background, but a smaller file that loads faster. See-through
JPG.jpg
For places that refuse PNG (some forms, email tools, older software). No transparency: sits on a solid colour, white unless you pick one. Solid background
AVIF.avif
The smallest modern web image with a see-through background. Only offered where your browser can create it. See-through
PNG set (@1x-@4x).zip
For apps and retina screens: one ZIP with the icon at 1x, 2x, 3x and 4x plus a README on which file goes where (iOS, Android, web, slides). See-through

Sharp at any size

Vector files: they never go blurry, from a sticker to a billboard.

SVG.svg
Sharp at any size with your colours locked in. Drop it into Figma, Illustrator, Canva, Keynote or Google Slides. See-through
SVG (themable).svg
For developers: keeps currentColor and the --with-* CSS variables (your colours as defaults), so CSS can recolour it. See-through
PDF (vector).pdf
A true vector PDF that prints razor sharp. Opens in Illustrator, Keynote, Word, PowerPoint and any PDF viewer. See-through
EPS.eps
Vector EPS for older design and print tools that ask for it. EPS has no transparency: see-through parts are blended onto your background (or white). Solid background

Moving icons

Your icon with its motion (or its Turn into switch) built in.

GIF (animated).gif
Plays everywhere: Slack, email, Notion, Google Slides, PowerPoint. Edges are blended with a matte colour (white, or your background), so pick the colour it will sit on. See-through, hard edges
APNG (animated PNG).png
An animated PNG with smooth, truly see-through edges on any background. Plays in every modern browser; elsewhere it shows the still icon. See-through
WebP (animated).webp
An animated image for websites and apps: smooth see-through edges and lossless by default, often smaller than GIF. Only offered where your browser can create WebP. See-through
WebM video.webm
A tiny looping video for websites and video editors. Keeps the see-through background in Chrome and Edge (VP9 alpha); other browsers record it on your background colour. See-through in Chrome and Edge
MP4 video.mp4
A short video for Keynote, PowerPoint, social posts and video editors. No transparency: it plays on your background colour (white unless you pick one). Solid background
PNG frames (ZIP).zip
Every frame as a numbered, see-through PNG: import as an image sequence in After Effects, Premiere, DaVinci Resolve, Blender or a game engine. See-through
Animated SVG.svg
One small, sharp-at-any-size file that animates by itself: in an <img>, opened in a browser, or pasted into a page. Uses the same motion as the site (CSS keyframes inside). See-through
Lottie JSON.json
Vector animation for apps and sites (lottie-web, iOS, Android, Flutter, React Native) and for motion designers in After Effects or LottieFiles. Stays sharp at any size. See-through
dotLottie.lottie
The compact Lottie package (.lottie) with playback settings built in. Drop it into LottieFiles, Webflow, Framer or the dotLottie players. See-through

PowerPoint & Word

Ready-made files to open in Microsoft Office, Keynote or Google.

PowerPoint slide.pptx
A ready 16:9 slide with the icon centred. Stays sharp and recolourable in PowerPoint 365; opens in Keynote and Google Slides too. See-through
PowerPoint: all styles.pptx
A deck showing this icon in every style side by side, then one slide per style. Handy for picking a look with your team. See-through
PowerPoint slide (animated).pptx
A ready 16:9 slide with the icon moving: an animated GIF that plays in PowerPoint, Keynote and Google Slides. Pick your slide colour as the background so the edges blend in. See-through, hard edges Can move
Word document.docx
A Word document with the icon placed inline, ready to copy into reports, briefs and handouts. Vector in Word 365, picture elsewhere. See-through

App & website icons

The files phones, browsers and app stores ask for.

ICO.ico
Windows and browser icon file with 16, 32, 48, 64 and 256 px inside. Use it as favicon.ico or a desktop shortcut icon. See-through
Favicon pack.zip
Everything a website needs: favicon.ico, favicon.svg, Apple touch icon, Android/PWA icons, site.webmanifest and the <link> tags to paste. See-through
Android (VectorDrawable).xml
Vector drawable XML for Android Studio: drop it into res/drawable. Sharp on every screen density, no PNGs needed. See-through
iOS (Xcode imageset).zip
Drag the .imageset folder into Assets.xcassets in Xcode: a vector PDF that stays sharp on every iPhone and iPad. One-colour icons tint like SF Symbols. See-through

Code

For developers: paste-ready components and snippets.

React (JSX).jsx
A ready-to-use React component file with size, color and title props. Motion included when you added one. Can move
React (TSX).tsx
The React component with TypeScript types, for typed React and Next.js projects. Can move
Vue.vue
A Vue 3 single-file component (<script setup>) with size, color and title props. Can move
Svelte.svelte
A Svelte component (works in Svelte 4 and 5) with size, color and title props. Can move
React Native.jsx
A react-native-svg component for iOS and Android apps. Colours are baked in (React Native has no CSS variables). Can move
Angular.ts
An Angular standalone component (Angular 17+) with size, color and title inputs. Can move
HTML.html
An inline SVG snippet to paste into any web page; recolour it with CSS. Includes the motion classes when you added one. Can move
CSS.css
A CSS class that shows the icon as a background image, plus a -mask class that takes the text colour. Can move
Data URI.txt
The icon as one line of text (data:image/svg+xml,...) for CSS url(), <img src> or email templates.
Base64.txt
The icon as a base64 data URI (data:image/svg+xml;base64,...) for tools and APIs that only accept base64.

Something not working?

There’s a white box behind my icon.

That file has no see-through background: JPG, MP4 and EPS always sit on a solid colour. Download a PNG (still) or a GIF (moving) instead, or pick your slide’s colour as the background before you download.

My GIF has a thin white or dark rim.

GIFs can only be fully see-through or fully solid, so the soft edges are blended with a background colour. Choose the colour your slide or page uses before you download, and the rim disappears. Or use APNG or animated WebP on websites.

My animated SVG stands still in PowerPoint or Google Slides.

Slide apps show SVG files as still pictures. Use a GIF (or an MP4 in PowerPoint and Keynote).

The PowerPoint slide opens, but I can’t change the colour.

Changing colours needs PowerPoint for Microsoft 365 or 2019 and newer. In older versions, Keynote or Google Slides the icon shows as a picture: pick the colour before you download.

Some formats are missing from the list.

A few formats (AVIF, animated WebP, WebM, MP4) are made by your browser, and we only show the ones it can create. Try Chrome or Edge for the full list.

The icon looks blurry.

A picture (PNG, GIF, MP4) was shown bigger than it was made. Download a bigger size, or use a format that stays sharp: SVG, PDF, Animated SVG or Lottie.

still unsure?

Ask your AI which file to use

Click Claude, ChatGPT, Gemini, Perplexity or Grok. We copy a ready brief that points it to our skill file and open it for you. Tell it where the icon is going (“a ringing bell on a Keynote slide”, “the menu of my Framer site”): it picks the icon, the style and the right file, then explains each step.

Got it? Pick your icon.

500 icons, twenty styles, 36 ways to download. All free.

Browse icons