Icon Atlas Studio

Build pixel-perfect icon atlases visually.

Icon Atlas Studio is a professional visual editor for creating customizable icon atlases and sprite sheets with drag-and-drop, theming, pixel-perfect layout, and developer-ready exports.

Designed for developers, designers, and teams who need complete control over how icons are organized, styled, rendered, and exported.

✨ Overview

Icon Atlas Studio lets you visually build an icon atlas from a large icon library without manually editing images or calculating sprite coordinates.

Instead of managing hundreds of individual icon files, you can create a single optimized atlas and use its generated metadata in your application.

The workflow

Search Icons
     ↓
Drag & Drop
     ↓
Arrange on Canvas
     ↓
Customize
     ↓
Preview
     ↓
Generate Atlas
     ↓
Export

You have complete control over the atlas:

Canvas dimensions
Rows and columns
Cell dimensions
Icon dimensions
Icon position
Padding
Spacing
Alignment
Icon color
Background
Transparency
Themes
Grid
Snap behavior
Export resolution
Export format
Metadata

🎯 Why Icon Atlas Studio?

Managing large collections of icons can become unnecessarily complicated.

A project may contain:

home.svg
search.svg
user.svg
settings.svg
notification.svg
cart.svg
heart.svg
share.svg
edit.svg
delete.svg
...

With an icon atlas, these assets can be organized into a single image:

┌────────┬────────┬────────┬─────────┐
│  Home  │ Search │  User  │ Settings│
├────────┼────────┼────────┼─────────┤
│  Bell  │  Cart  │ Heart  │  Share  │
├────────┼────────┼────────┼─────────┤
│  Edit  │ Delete │  Plus  │  Menu   │
└────────┴────────┴────────┴─────────┘

Icon Atlas Studio makes creating that atlas visual, configurable, and developer-friendly.

🚀 Features

🎨 Visual Canvas

A powerful canvas for designing your icon atlas.

Zoom
Pan
Grid
Snap
Guides
Pixel-perfect positioning
Cell selection
Multi-selection
Drag and drop
Keyboard navigation
Alignment tools
Distribution tools

🔎 Icon Library

Search and browse icons directly inside the editor.

Features include:

Icon search
Categories
Recently used icons
Favorites
Drag-and-drop
Icon previews
Icon metadata

The icon system is designed around a provider architecture so additional icon sources can be added in the future.

🧩 Drag & Drop

Drag an icon directly from the library onto the canvas.

You can:

Add icons
Move icons
Reorder icons
Duplicate icons
Delete icons
Move icons between cells

The canvas provides visual feedback while dragging.

📐 Pixel-Perfect Layout

Control every dimension of the atlas.

Grid
Rows
Columns
Cell width
Cell height
Horizontal gap
Vertical gap
Spacing
Top / right / bottom / left padding
Position (X, Y)
Width / Height

Everything can be configured precisely.

🎨 Complete Customization

Every icon and cell can be customized.

Icon properties

Size (width, height)
Position
Rotation
Scale
Opacity
Alignment
Color

Cell properties

Background
Border
Border width
Border radius
Padding
Alignment

🌈 Theme System

Create and customize complete themes.

The application includes a sophisticated dark green theme by default.

Built-in themes

Forest
Emerald
Midnight
Carbon
Ocean
Purple
Minimal
Monochrome
Transparent
Custom

Themes can control:

Application background
Surfaces
Borders
Primary color
Accent color
Text / muted text
Canvas background
Grid color
Selection color
Icon colors

🌓 Transparent Backgrounds

Create atlases with transparent backgrounds.

Transparency can be previewed using a checkerboard canvas.

This is particularly useful for:

Mobile applications
React Native
Web applications
Games
UI libraries

🖼️ Export

Generate production-ready icon assets directly from the editor.

Supported formats

PNG
WebP
JSON metadata
TypeScript
CSS

Export configuration can include:

Resolution
Pixel ratio
Background
Transparency
Metadata
Runtime helpers

📦 Developer-Ready Metadata

Every generated atlas can include metadata describing the location of each icon.

Example:

{
  "version": "1.0",
  "atlas": {
    "width": 512,
    "height": 256
  },
  "cell": {
    "width": 32,
    "height": 32
  },
  "icons": {
    "home": {
      "x": 0,
      "y": 0,
      "width": 32,
      "height": 32
    },
    "search": {
      "x": 32,
      "y": 0,
      "width": 32,
      "height": 32
    }
  }
}

This allows applications to determine exactly which region of the atlas contains each icon.

⚛️ React Native

Icon Atlas Studio is designed with mobile developers in mind.

Generated atlas metadata can be used to create a simple icon component:

<Icon name="home" size={24} />

The generated implementation can map the icon name to its corresponding region of the atlas.

This makes it possible to maintain a large icon collection while distributing a compact atlas asset.

🛠️ Developer Mode

Developer Mode exposes the technical information behind the visual editor.

For each icon you can inspect:

Name: home
X: 0
Y: 0
Width: 32
Height: 32

You can also inspect:

Atlas dimensions
Cell dimensions
Pixel coordinates
Icon bounds
Export settings
Metadata

This makes the tool useful for both designers and developers.

💾 Project Files

Projects can be saved as portable project files.

Example:

my-icons.atlas.json

A project contains:

Atlas configuration
Grid configuration
Icon positions
Icon properties
Theme
Canvas settings
Export settings

Projects can be imported later and edited again.

↩️ Undo & Redo

The editor provides history management for common operations.

Supported operations include:

Add
Remove
Move
Resize
Recolor
Reorder
Grid changes
Theme changes
Layout changes

Keyboard shortcuts

Action	Shortcut
Undo	`Cmd/Ctrl + Z`
Redo	`Cmd/Ctrl + Shift + Z`
Duplicate	`Cmd/Ctrl + D`
Select All	`Cmd/Ctrl + A`
Save	`Cmd/Ctrl + S`
Command Palette	`Cmd/Ctrl + K`

🧠 Smart Layout

Icon Atlas Studio provides automatic layout tools.

Auto Arrange — Automatically organize icons into the atlas grid.
Compact — Remove unnecessary empty rows and columns.
Normalize Sizes — Make selected icons use consistent dimensions.
Normalize Padding — Apply consistent spacing to selected cells.
Center All — Center selected icons inside their cells.
Distribute — Distribute icons horizontally or vertically.

🧪 Pixel Precision

Pixel-perfect mode is designed specifically for sprite and atlas workflows.

When enabled:

Positions use integer pixels
Dimensions use integer pixels
Fractional positioning is avoided
Export coordinates remain deterministic

This helps prevent unexpected rendering differences in sprite-based systems.

🧱 Architecture

Icon Atlas Studio is designed as a modular editor rather than a collection of disconnected UI components.

The application separates:

┌───────────────────────┐
│       UI Layer        │
├───────────────────────┤
│     Editor State      │
├───────────────────────┤
│   Canvas Renderer      │
├───────────────────────┤
│    Icon Providers      │
├───────────────────────┤
│     Atlas Model        │
├───────────────────────┤
│    Theme System         │
├───────────────────────┤
│    Export Engine        │
├───────────────────────┤
│  Metadata Generator     │
├───────────────────────┤
│     Persistence         │
└───────────────────────┘

This makes it possible to add new features and icon providers without rewriting the editor.

🧩 Icon Provider Architecture

Icon Atlas Studio uses an abstraction layer for icon sources.

Conceptually:

interface IconProvider {
  search(query: string): IconDefinition[];
  getCategories(): IconCategory[];
  getIcon(id: string): IconDefinition | null;
}

This allows future support for:

Built-in icon libraries
Custom SVG icons
User-uploaded icons
External icon providers
Project-specific icon collections

📁 Project Structure

The project is organized around clear responsibilities.

icon-atlas-studio/
├── app/
│   ├── editor/
│   ├── settings/
│   └── ...
│
├── components/
│   ├── canvas/
│   ├── icon-library/
│   ├── inspector/
│   ├── toolbar/
│   ├── export/
│   └── ui/
│
├── lib/
│   ├── atlas/
│   ├── renderer/
│   ├── icons/
│   ├── themes/
│   ├── export/
│   └── storage/
│
├── types/
│
├── public/
│
└── README.md

The exact structure may evolve as the project grows.

💻 Tech Stack

Icon Atlas Studio is built using modern web technologies.

Next.js
React
TypeScript
Tailwind CSS
shadcn/ui
HTML Canvas
Web APIs
LukaDev Icon Library

Additional dependencies should only be introduced when they provide meaningful value.

⚡ Performance

Performance is a core requirement.

The editor is designed to remain responsive when working with large icon collections and large atlases.

Important considerations include:

Memoized components
Virtualized icon lists
Debounced search
Efficient state updates
Canvas rendering
Offscreen rendering where supported
Web Workers for expensive operations
Lazy loading
Minimal unnecessary React renders

The goal is to keep the editor responsive even with hundreds or thousands of available icons.

🔐 Privacy

The core editor is designed to work locally in the browser wherever possible.

Projects can be stored locally and exported without requiring a backend for the basic workflow.

No project data should be sent to a server unless a future feature explicitly requires it and the user is informed.

🖥️ Getting Started

Requirements

Make sure you have:

Node.js
npm, pnpm, or another supported package manager
Git

Clone the repository

https://github.com/iplustsolution/Icon-Atlas-Studio.git
cd Icon-Atlas-Studio

Install dependencies

Using npm:

npm install

Or using pnpm:

pnpm install

Start development server

npm run dev

Then open:

http://localhost:3000

🏗️ Build

Create a production build:

npm run build

Start the production server:

npm run start

🧹 Code Quality

Before submitting changes, run the project's checks:

npm run lint

If formatting is configured:

npm run format

🗺️ Roadmap

Phase 1 — Core Editor

Phase 2 — Customization

Phase 3 — Export

Phase 4 — Advanced Editor

Phase 5 — Ecosystem

🤝 Contributing

Contributions are welcome.

If you would like to contribute:

Fork the repository.
Create a feature branch.
Make your changes.
Test your changes.
Run linting and formatting.
Commit your changes.
Open a pull request.

Example:

git checkout -b feature/my-feature

Then:

git add .
git commit -m "feat: add my feature"
git push origin feature/my-feature

💡 Feature Requests

Have an idea?

Open a GitHub issue and describe:

What problem it solves
How you expect it to work
Why it would be useful
Any examples or references

Screenshots and prototypes are especially welcome.

🐛 Bug Reports

When reporting a bug, include:

Operating system
Browser
Browser version
Project configuration
Steps to reproduce
Expected behavior
Actual behavior
Screenshots if applicable
Console errors if available

📜 License

This project is licensed under the MIT License.

See LICENSE for details.

⭐ Support the Project

If Icon Atlas Studio is useful to you:

⭐ Star the repository
🐛 Report bugs
💡 Suggest features
🔧 Contribute improvements
📢 Share it with other developers

Every contribution helps improve the project.

📌 Project Status

🚧 Icon Atlas Studio is currently under active development.

The API, project format, export format, and internal architecture may change while the project evolves.

Built for Pixel-Perfect Icon Workflows
Icon Atlas Studio — Build pixel-perfect icon atlases visually.

Name		Name	Last commit message	Last commit date
CONTRIBUTING.md		CONTRIBUTING.md
LICENSE		LICENSE
README.md		README.md

Uh oh!

Latest commit

History

Folders and files

Repository files navigation

Icon Atlas Studio

✨ Overview

The workflow

🎯 Why Icon Atlas Studio?

🚀 Features

🎨 Visual Canvas

🔎 Icon Library

🧩 Drag & Drop

📐 Pixel-Perfect Layout

🎨 Complete Customization

🌈 Theme System

🌓 Transparent Backgrounds

🖼️ Export

📦 Developer-Ready Metadata

⚛️ React Native

🛠️ Developer Mode

💾 Project Files

↩️ Undo & Redo

🧠 Smart Layout

🧪 Pixel Precision

🧱 Architecture

🧩 Icon Provider Architecture

📁 Project Structure

💻 Tech Stack

⚡ Performance

🔐 Privacy

🖥️ Getting Started

Requirements

Clone the repository

Install dependencies

Start development server

🏗️ Build

🧹 Code Quality

🗺️ Roadmap

Phase 1 — Core Editor

Phase 2 — Customization

Phase 3 — Export

Phase 4 — Advanced Editor

Phase 5 — Ecosystem

🤝 Contributing

💡 Feature Requests

🐛 Bug Reports

📜 License

⭐ Support the Project

📌 Project Status

About

Topics

Resources

Contributing

Stars

Watchers

Forks

Releases

Packages

Contributors