Icon Atlas Studio — Free Online Sprite Sheet & Icon Atlas Generator

This atlas is empty.

Open the icon library, then use Add all to drop a whole category in at once. You can also drop your own SVG files straight in.

Free, open source, runs in your browser

What is an icon atlas?

An icon atlas, also called a sprite sheet or a texture atlas, is a single image that holds many smaller images laid out on a grid. Instead of shipping two hundred separate SVG or PNG files, you ship one image plus a small coordinate map that says where each icon sits inside it. The browser, the game engine or the mobile app then crops the one image to show the one icon it needs.

The win is request count and decode cost. Two hundred icon files are two hundred round trips, two hundred cache entries and two hundred decodes. One atlas is a single request, a single cache entry and a single decode, however many icons it holds. On a cold mobile connection that difference is usually the difference between icons that pop in and icons that are simply there.

Icon Atlas Studio is the editor for building that atlas. You pick icons from a searchable library of 1,611 Lucide icons or drop in your own SVG files, arrange them on a grid you control, restyle them together or one at a time, and export the finished sheet with the coordinate map already written for you.

Lucide icons built in: 1,611Lucide icons built in
To place the whole library: ~100msTo place the whole library
However many icons ship: 1 requestHowever many icons ship
Nothing leaves your device: 0 uploadsNothing leaves your device

How to build an icon sprite sheet

Six steps, about five minutes, no account and no installation. The editor above is the whole tool.

Choose your icons
Search the built-in library of 1,611 Lucide icons by name, keyword or category, and click an icon to place it on the sheet. Use bulk placement to add every match at once.
Import your own artwork
Drag your own SVG files onto the library, or use the import button. Imported icons are normalised onto the same grid and behave exactly like built-in ones.
Lay out the grid
Set the column count, cell width and height, gaps and padding. Use square packing to get the sheet closest to square, sort A to Z, remove duplicates, or drag icons into the order you want.
Style the sheet
Set colour, size, stroke weight and opacity for every icon at once, then override colour, size or rotation on individual icons. Pick a transparent or solid background.
Export the atlas
Open the export dialog, choose PNG, WebP or SVG and a pixel density, optionally enable @2x and @3x variants, and download a single zip containing the image, a JSON coordinate map, a typed TypeScript module and a CSS file with one class per icon.
Use it in your project
Link the generated CSS and use one class per icon, import the TypeScript helper for a compile-checked icon name union, or read the JSON coordinate map directly from any language, including React Native.

Features

Searchable library of 1,611 icons

Every Lucide icon, ranked search, category filters and legacy aliases.

The whole Lucide set is searchable by name, keyword and category. Search is ranked rather than substring-matched, so typing "home" surfaces the icon actually named home before it offers you anything that merely contains the word. 215 deprecated Lucide names are kept as aliases, so an older name like alert-circle still finds circle-alert. The grid is windowed, which keeps scrolling smooth with the entire library on screen.

Bulk placement in one click

Filter, then add every match at once. The full library lands in about 100ms.

Search or pick a category, then add every matching icon with a single click. Adding all 1,611 icons takes roughly 100 milliseconds, so building a sheet from a whole category is a two-second job rather than a two-hundred-click one.

Import your own SVG files

Drag and drop your brand marks. They are normalised, restyled and exported like any other icon.

Drop SVG files onto the library or use the import button. Imported artwork is normalised onto the same 24-unit grid as the built-in set, recoloured to match the sheet with stroked artwork left as outlines, saved inside the project, and carried in the project file. Imported files are parsed with an allow-list rather than a sanitiser: only known shape elements and geometry attributes survive. Scripts, inline event handlers, foreignObject and external references never reach the DOM.

Precise grid control

Columns, cell size, gaps, padding, square packing, sorting and drag reordering.

Set the column count, cell width and height, horizontal and vertical gap, and the padding around the sheet. Square packing picks the column count that brings the sheet closest to square in one click, which is what you want when a GPU prefers a squarish texture. You can sort A to Z, remove duplicates, clear the sheet, or drag any icon to reorder it. The sheet stays densely packed at all times, so removing an icon reflows the rest and there are never holes to account for.

Global and per-icon styling

Colour, size, stroke weight, opacity and rotation, applied to everything or to one icon.

Set the colour, size, stroke weight and opacity for every icon at once, then override colour, size or rotation for a single icon or a shift-selected range. Backgrounds can be transparent, previewed against a checkerboard, or a solid colour.

PNG, WebP and SVG export

One archive with the image, a JSON map, a typed TypeScript module and a CSS file.

Export the sheet as PNG at 1x to 4x pixel density, as WebP for smaller files at the same coordinates, or as SVG for a resolution-independent sheet. Alongside the image you get a JSON coordinate map usable from any language, a TypeScript module with a name union and an iconStyle helper, and a CSS file with one ready-made class per icon. Everything arrives as a single zip archive rather than four separate downloads.

Retina variants wired up for you

@2x and @3x companions sharing one coordinate map, delivered through CSS image-set.

One toggle ships @2x and @3x companion images beside the base sheet. They share a single coordinate map and the generated CSS wires them together with image-set, so a high-density screen picks the right file on its own. Coordinates stay in logical pixels whatever the export density, which means a 3x sheet needs no arithmetic on your side.

Autosave and portable project files

Work is kept in the browser and can be saved to a single .atlas.json file.

Projects autosave to your browser and can be saved to or opened from a portable .atlas.json file. A project holds the grid configuration, icon order and overrides, background, imported artwork and export settings, so a sheet can be handed to a teammate or committed to a repository and rebuilt exactly.

Fifty steps of undo

History across adding, removing, reordering, restyling and layout changes.

Every add, removal, reorder, restyle and layout change goes through the same history stack, fifty steps deep, with the usual keyboard shortcuts. Experimenting with a layout costs nothing because getting back is one keystroke.

Runs offline, uploads nothing

No account, no backend, no telemetry. The editor works with the network switched off.

The entire editor runs in your browser. Projects live in local storage and in files you save yourself. Nothing is uploaded, there is no account and there is no telemetry. After your first visit the app is cached on your device, so it opens and keeps working with no connection at all.

What an export contains

Every export is a single zip holding the sheet image and the three files your code needs to use it, so there is no second step and nothing to wire up by hand.

Formats produced by Icon Atlas Studio and what each one is best suited to
File	Best for	Notes
PNG.png	Universal support and predictable rasterisation	Exports at 1x to 4x pixel density. Works everywhere, including older browsers, game engines and native mobile.
WebP.webp	Smaller files on the modern web	Noticeably smaller than PNG at the same visual quality, and the coordinate map is byte-for-byte identical, so you can swap formats without touching code.
SVG.svg	Resolution independence	One vector document holding the whole sheet. Stays crisp at any zoom and needs no retina variants at all.
JSON coordinate map.json	Any language or runtime	Atlas dimensions, cell geometry and a per-icon record with index, row, column, x, y, width and height in logical pixels.
TypeScript module.ts	Compile-time safety in React and TypeScript apps	Exports an IconName union of the names actually on the sheet plus an iconStyle helper, so a typo is a build error rather than a blank square.
CSS stylesheet.css	Plain HTML, and any framework	One ready-made class per icon with the background-position already computed, and image-set wiring when retina variants are enabled.

Using the exported sheet

The export dialog shows a copyable snippet for each of these, filled in with your own sheet name and dimensions.

HTML and CSS

<link rel="stylesheet" href="icon-atlas.css" />

<span class="icon-atlas icon-atlas--house"></span>

React

import { iconStyle } from './icon-atlas';
import sheet from './icon-atlas.png';

<span style={iconStyle('house', sheet)} />

React Native

<View style={{ width: 64, height: 64, overflow: 'hidden' }}>
  <Image
    source={require('./icon-atlas.png')}
    style={{ width: 768, height: 832, marginLeft: -128, marginTop: -64 }}
  />
</View>

The coordinate map

{
  "version": 1,
  "image": "icon-atlas.png",
  "variants": [1, 2, 3],
  "atlas": { "width": 768, "height": 832, "columns": 12, "rows": 13 },
  "cell": { "width": 64, "height": 64, "gapX": 0, "gapY": 0 },
  "icons": [
    { "name": "house", "index": 0, "row": 0, "column": 0,
      "x": 0, "y": 0, "width": 64, "height": 64 }
  ]
}

Who uses an icon atlas

Web developers

Replace a folder of individual icon files with one sprite sheet and a stylesheet, cutting an icon-heavy page from hundreds of requests down to one.

Design systems teams

Publish a versioned icon atlas with a typed name union, so every consuming app gets the same icons and a compile error when a name is retired.

Game developers

Produce a squarish, densely packed texture atlas with an exact coordinate map, ready for a sprite batcher in Unity, Godot, Phaser or a custom WebGL renderer.

React Native and mobile engineers

Bundle one image with @2x and @3x variants instead of dozens of assets per density, and crop it with the coordinates straight from the JSON map.

Email and CMS teams

Host a single icon image and reference it by background position from environments where you cannot ship an icon font or an SVG sprite.

Documentation and marketing sites

Keep a small, consistent icon set on one sheet so the whole set is in cache after the first page view, whichever page a visitor lands on.

Frequently asked questions

Is Icon Atlas Studio free to use?

Yes. Icon Atlas Studio is free and open source under the MIT licence. There is no account, no paid tier, no usage limit and no watermark on anything you export.

Do I have to upload my icons anywhere?

No. The entire editor runs in your browser. Your icons, imported SVG files and projects never leave your device, because there is no backend to send them to. Projects are stored in your browser local storage and in the .atlas.json files you choose to save.

Does it work offline?

Yes. After your first visit the app, its icon data and its assets are cached on your device by a service worker. Open the page again with no connection and the full editor loads and works normally, including importing SVG files and exporting a finished atlas. You can also install it as an app from your browser.

What is the difference between a sprite sheet and an icon atlas?

In practice they are the same thing: one image holding many smaller images plus a map of where each one sits. Sprite sheet is the term used most often on the web and in 2D game development, texture atlas is the usual term in graphics programming, and icon atlas is the term when the contents are interface icons. Icon Atlas Studio produces an image and a coordinate map that fit all three uses.

Which icons are included?

The full Lucide icon set, 1,611 icons, is built in and searchable by name, keyword and category. Lucide is ISC licensed and free for commercial use. You can also import your own SVG files and mix them freely with the built-in set on the same sheet.

Can I import my own SVG files?

Yes. Drag SVG files onto the icon library or use the import button. Imported artwork is normalised onto the same 24-unit grid as the built-in icons, recoloured to match the sheet, saved inside your project and exported exactly like any other icon. Artwork must be flattened, because grouped or per-shape transforms are refused rather than drawn in the wrong place.

Is importing an SVG from an untrusted source safe?

Imported SVG files are parsed with an allow-list rather than cleaned with a sanitiser. Only known shape elements and geometry attributes survive; everything else is discarded before anything is rendered. Script tags, inline event handlers, foreignObject elements and references to remote resources never reach the DOM.

What formats can I export?

The sheet exports as PNG at 1x to 4x pixel density, as WebP, or as SVG. Every export also includes a JSON coordinate map, a TypeScript module with a typed icon name union and an iconStyle helper, and a CSS file with one ready-made class per icon. It all arrives as a single zip archive.

How do I use the exported sheet in CSS?

Link the generated stylesheet and give an element the shared icon-atlas class plus the per-icon modifier class, for example icon-atlas icon-atlas--house. The background image, size and position are already written for you, so no arithmetic is needed.

How do I use the exported sheet in React or React Native?

In React, import the generated iconStyle helper and the sheet image and spread the returned style onto a span. The IconName type is a union of the names actually on your sheet, so a typo is a compile error. In React Native, wrap an Image in a fixed-size View with overflow hidden and offset it with the margin values derived from the coordinate map.

Does it support retina and high-density screens?

Yes. One toggle exports @2x and @3x companion images alongside the base sheet. They share a single coordinate map and the generated CSS wires them up with image-set, so the browser picks the right density. Coordinates stay in logical pixels at every density, so your code needs no changes.

How many icons can one sheet hold?

A sheet holds up to 4,000 icons and a project up to 300 imported SVG files. Raster exports are capped at 16,384 pixels on a side, which is the ceiling browsers put on a canvas. The export dialog blocks an export that would cross that line and explains why, and warns above 8,192 pixels because some mobile GPUs cap textures at 4,096.

Can I save a project and come back to it?

Yes. Work autosaves to your browser as you go, and you can save a project to a portable .atlas.json file that holds the grid configuration, icon order, per-icon overrides, background, imported artwork and export settings. Open that file later, on any machine, and the sheet is restored exactly.

Does it work on a phone or tablet?

Yes. Below 1,024 pixels wide the side panels become overlay drawers and the toolbar scrolls, so every control stays reachable down to a 390 pixel phone screen.

Why use a sprite sheet instead of an icon font or inline SVG?

An icon font ties you to glyph rendering, hinting and accessibility workarounds. Inline SVG multiplies your DOM node count on icon-heavy pages. A sprite sheet keeps one cached image and one cheap CSS rule per icon, works in environments where you cannot ship a font, and gives a game engine or native app exactly the coordinates it needs.

Glossary

Sprite sheet: A single image containing many smaller images, used so that a program can draw any of them by cropping one texture instead of loading many files.
Texture atlas: The graphics-programming name for a sprite sheet. Keeping artwork in one texture lets a renderer draw many sprites in a single batched draw call.
Coordinate map: The data file that accompanies an atlas, recording where each icon sits inside the image: its index, row, column, x and y offset, width and height.
Cell: One slot on the atlas grid. Every icon occupies exactly one cell, and cell width and height are set independently of the icon size drawn inside them.
Gap and padding: Gap is the space between neighbouring cells, padding the space around the whole sheet. Both exist mainly to stop a sampler bleeding one icon into the next when a texture is scaled.
Pixel density: How many device pixels a raster export uses per logical pixel. A 2x export is twice as wide and tall as the 1x sheet while describing exactly the same layout.
Square packing: Choosing the column count that brings the finished sheet closest to square, which suits GPU texture limits and avoids one extremely long dimension.
image-set: The CSS function that offers a browser several versions of the same image at different pixel densities and lets it pick the one that suits the screen.