Icon File Formats Glossary: SVG, PNG, ICO, WebP & 25+ More

Vector Formats

Shapes described mathematically — infinitely scalable, resolution-independent.

SVG .svg

Scalable Vector Graphics — the W3C's XML-based vector format and the undisputed standard for UI icons. Sharp at every size and pixel density, styleable with CSS (including currentColor inheritance), animatable, accessible, and typically smaller than PNG for flat artwork. All 134,701 icons on IconStash export as SVG. See our complete SVG usage guide.

SVGZ .svgz

A gzip-compressed SVG. Largely obsolete on the web: servers already compress SVG responses with gzip or Brotli on the fly, and SVGZ files break when served without the correct Content-Encoding header. Prefer plain SVG plus server compression.

EPS .eps

Encapsulated PostScript — a legacy print-industry vector format. Still requested for merchandise, signage, and vinyl cutting; never used in software UIs. Convert from SVG only when a print vendor demands it.

AI .ai

Adobe Illustrator's native source format. A working file, not a delivery format — it holds editable layers, artboards, and effects. Icon libraries distribute SVG; the AI file stays with the designer.

PDF (vector) .pdf

Before SF Symbols, Apple's Xcode accepted single-scale vector PDFs for iOS/macOS icon assets, and PDF remains a valid vector interchange format in Apple toolchains. On the web it plays no icon role.

Raster Formats

Fixed grids of pixels — exact control at one size, blur at every other.

PNG .png

Portable Network Graphics — lossless compression with full 8-bit alpha transparency. The standard raster format for icons: app store assets, apple-touch-icons and manifest icons, email clients, and anywhere SVG isn't accepted. IconStash exports PNG at any size up to 2048px.

APNG .png

Animated PNG — PNG's frame-based animation extension, supported by all modern browsers. Delivers lossless animated icons with alpha, but file sizes grow fast; Lottie or CSS-animated SVG are usually leaner.

JPEG .jpg

Lossy photographic compression with no transparency — the two properties that disqualify it for icons. Flat-color artwork also develops visible ringing artifacts around JPEG edges. For icons, JPEG is always the wrong answer.

GIF .gif

The 1987 format that refuses to die: 256 colors, 1-bit transparency (jagged edges), frame animation. Only historical icon relevance; every use case is served better by PNG, APNG, or video formats.

WebP .webp

Google's modern raster format: lossy and lossless modes, alpha, and animation, typically 25–35% smaller than PNG. Universally supported since 2020. Great for content images; for flat icon artwork the savings over optimized PNG are modest, and SVG beats both.

AVIF .avif

AV1 Image File Format — the best compression ratio of any broadly supported web format, with alpha, HDR, and wide gamut. Like WebP, its advantage shows on photographs; icons stay in SVG/PNG territory unless your image pipeline already emits AVIF everywhere.

BMP .bmp

Windows Bitmap — mostly uncompressed pixels. Historically the payload inside ICO files (favicon bitmaps are BMP-structured). Never shipped standalone on the web today.

TIFF .tiff

A high-fidelity print and archival raster format. Appears in icon work only as design-source exports for print; browsers don't even display it.

Icon Container Formats

One file, many sizes — the OS picks the best match.

ICO .ico

The Windows Icon container: multiple raster images (16×16 up to 256×256) packed into one file so the OS can pick the right size. On the web it survives as exactly one file — /favicon.ico — which crawlers and legacy tools request by convention. A single 32×32 entry is sufficient in 2026; see the favicon guide.

ICNS .icns

Apple Icon Image — macOS's equivalent container, storing sizes from 16×16 through 1024×1024 including @2x Retina variants. Required for macOS app bundles; irrelevant to the web.

CUR .cur

The Windows cursor format — structurally an ICO with an added hotspot coordinate (the pixel that "points"). Still valid in CSS via cursor: url(pointer.cur) for custom cursors.

Font Delivery Formats

Icons smuggled into typefaces — the dominant pattern of the 2010s.

Icon font concept

A typeface whose glyphs are icons instead of letters (Font Awesome, Material Icons font). Icons render via CSS classes and inherit text color — but suffer anti-aliasing blur, FOUT, accessibility problems, and all-or-nothing loading. Modern verdict: SVG wins on every axis.

TTF / OTF .ttf .otf

TrueType and OpenType — the raw font formats icon fonts are authored in. Shipped to browsers only as a legacy fallback; modern sites serve WOFF2 exclusively.

WOFF2 .woff2

Web Open Font Format 2 — Brotli-compressed font packaging, ~30% smaller than WOFF. If you must ship an icon font, WOFF2 is the only format worth serving; every current browser supports it.

Platform-Specific Formats

What icons look like inside native app pipelines.

VectorDrawable .xml

Android's native vector format — an XML dialect that mirrors a subset of SVG path syntax. Android Studio imports SVG and converts automatically; complex SVG features (filters, masks, text) don't survive the trip. The reason "export clean paths" matters when optimizing icons.

Adaptive icon android

Android's launcher icon system (API 26+): a foreground layer plus a background layer, each 108×108dp, which the OS masks into circles, squircles, or rounded squares per device. Layers can be VectorDrawables or PNGs.

SF Symbols apple

Apple's system icon library — 6,000+ glyphs that behave like text: they scale with Dynamic Type, align to font baselines, and support variable weights and rendering modes. Distributed as a macOS app and consumed by name in SwiftUI/UIKit, not as loose files.

Asset catalog .xcassets

Xcode's container for iOS/macOS image assets, including app icons (PNG at mandated sizes) and vector assets (PDF/SVG with "Preserve Vector Data"). The build system compiles it into optimized binary form.

Web app manifest icons .webmanifest

The PNG set (192×192 and 512×512, plus optional maskable variants) declared in a site's manifest.webmanifest. Android and desktop PWA installs pull home-screen icons and splash screens from here — the fourth pillar of the modern favicon setup.

Animation & Data Formats

Icons as data — animated, spritesheeted, or inlined.

Lottie .json

An animation format exported from After Effects (via Bodymovin) as JSON describing vector shapes and keyframes, rendered at runtime by lightweight players on web, iOS, and Android. The industry standard for complex animated icons; for simple micro-interactions, CSS-animated SVG is lighter still.

Iconify JSON .json

A packaging format that stores an entire icon set's path data in one JSON file, letting frameworks render any icon on demand without shipping thousands of SVG files. Powers unified icon pipelines like unplugin-icons.

SVG sprite .svg

Many icons combined into one SVG as <symbol> elements, each rendered where needed via <use href="#id">. One cached request, DOM-light instances, full CSS styling — the standard delivery pattern for scalable icon systems.

Data URI base64

An icon embedded directly into HTML or CSS as a data:image/svg+xml,... (URL-encoded) or base64 string — zero extra HTTP requests, but the icon bloats every stylesheet copy and can't be cached independently. Best reserved for tiny, critical, single-use icons.

CSS mask icon technique

Not a file format but a delivery technique: an SVG applied via mask-image, with the visible color supplied by background-color. Gives external SVG files the recolorability of inline SVG — one line of CSS, fully cacheable.

Format Decision Table

Frequently Asked Questions