Custom icons. Ready for production.

Keep each project's icons in one set, review them, and hand designers and developers the same thing: a versioned npm package.

Get started free See how it works

Free while we're in early access. No credit card.

acmeicons

Grid 24
Stroke 1.75
Caps round

@acme/icons1.4.0

12 icons · React · Vue · SVG sprite

import { Bell } from "@acme/icons/react";

Example set

Custom icons pass through too many hands

Drawn in one tool, exported, zipped, sent, pasted. Every hop is manual, and any of them can leave the team with a different file than the one the designer meant.

Before
Drawn
in Figma or another tool
bell-final-v3
With Vectoad
Kept in a set
one set per project, with its own style rules
acme/icons
Several copies, and no obvious current one
Before
Exported
one SVG at a time
bell.svgbell (2).svg
With Vectoad
Checked on the way in
cleaned up and linted against the set
12/12 pass
Re-exported by hand after every change
Before
Zipped
and attached to a message
icons-final.zip
With Vectoad
Reviewed
a reviewer approves each change
Approved
Designer and developer waiting on each other
Before
Handed off
in a chat thread
is this the latest?
With Vectoad
Released
a versioned package with a changelog
1.4.0
Before
Pasted into code
SVG by SVG, wrapped by hand
<svg width="31"…
With Vectoad
Installed
npm update, one component per icon
<Bell />

Vectoad joins the hops into one line: a set per project, checked and reviewed, released as a package.

One set, three ways in

Use the part that fits your work. A designer can start in the dashboard, a developer can start from the package, and either can add the other whenever they need it.

Make the set, keep it in order

Create one icon set per project, upload SVGs or send icons straight from Figma, and adjust weight, size, caps, joins and colour on the canvas. The linter checks every icon against the set's rules before a reviewer sees it.

Sets organised by project, with categories and tags
Figma plugin: pull approved icons into your files, send new ones back for review
Variants of an icon, edited on a canvas with a live preview
Shareable preview pages for reviews and client handoffComing soon

Grid
Stroke
Caps
Joins
Palette
Complexity

Checked on every upload

Install the set like any package

Every release builds a versioned npm package with a React component and a Vue component per icon, plus raw SVGs, a sprite and CDN files. Private sets install with a token. Update with npm, roll back by version.

Predictable imports: @scope/set/react or /vue
Semver releases with a changelog, and rollback
CDN, SVG sprite and PNG on demand
Svelte and web componentsComing soon
An icon fontComing soon

$ npm install @acme/icons

import { Bell } from "@acme/icons/react";

<Bell size={20} />

Point your coding agent at the real set

The MCP server connects Claude Code, Cursor and other MCP clients to your workspace. Today it lists your icon sets and their packages, so an agent can reach for them before inventing an SVG. It is read-only, and nothing it can do publishes.

Connects with an API token you control
Lists your sets, package names and latest versions
Tokens can propose, never approve
Search and fetch icons with usage snippetsComing soon
Propose and generate icons from an agentComing soon

// what an agent gets today
[{ "slug": "icons",
   "package": "@acme/icons",
   "latestVersion": "1.4.0",
   "iconCount": 12 }]

From the MCP tool list_sets

From Figma to npm install

One pipeline, and every change goes through review.

Create or import

Upload SVGs, or send icons from the Figma plugin. Every file is cleaned on the way in: a proper viewBox, currentColor, no editor leftovers.

Example: bell.svg

As uploaded

<svg width="24" height="24"
     stroke="#1D1D1B"
     xmlns:sketch="…">
  <title>Bell-final-v3</title>
  <path d="M6 9a6 6 0 0 1 12 0…"/>
</svg>

Stored

<svg viewBox="0 0 24 24"
     stroke="currentColor">
  <path d="M6 9a6 6 0 0 1 12 0…"/>
</svg>

2
Check and refine
A linter scores each icon against the set's grid, stroke, caps, joins, palette and complexity. Errors block the upload; warnings go to the reviewer. Adjust variants on the canvas.
Style linter · set spec
- GridviewBox 24×2412/12
- Stroke1.7512/12
- Capsround11/12
- Joinsround12/12
- PalettecurrentColor12/12
- Complexityshapes within the set's maximum12/12
sliders.svg Line caps "butt" differ from "round"
A warning doesn't block the upload. The reviewer decides.
3
Review
A reviewer approves the change in the dashboard. Nothing publishes without review.
Review inbox
Add 12 icons
Uploaded by Mara to acme/icons
11 pass · 1 warning
Jonas, reviewerWaiting for reviewRequest changesApproveApproved
Nothing publishes without review.
4
Release
A semver release builds an npm package, an SVG sprite and CDN files, with PNGs on demand. You can roll back.
New release
1.4.0
Suggested from 12 added icons
BuildingReleased
- npm package: React and Vue
- SVG sprite and manifest
- CDN files
- PNG on demand
Every version stays available, so you can roll back.

Install

Developers run npm update and get React and Vue components, one per icon.

In your app

$ npm update @acme/icons

import { Bell, Search } from "@acme/icons/react";

<Bell size={20} />
<Search size={20} />

Example: bell.svg

As uploaded

<svg width="24" height="24"
     stroke="#1D1D1B"
     xmlns:sketch="…">
  <title>Bell-final-v3</title>
  <path d="M6 9a6 6 0 0 1 12 0…"/>
</svg>

Stored

<svg viewBox="0 0 24 24"
     stroke="currentColor">
  <path d="M6 9a6 6 0 0 1 12 0…"/>
</svg>

Style linter · set spec

GridviewBox 24×2412/12
Stroke1.7512/12
Capsround11/12
Joinsround12/12
PalettecurrentColor12/12
Complexityshapes within the set's maximum12/12

sliders.svg Line caps "butt" differ from "round"

A warning doesn't block the upload. The reviewer decides.

Review inbox

Add 12 icons

Uploaded by Mara to acme/icons

11 pass · 1 warning

Jonas, reviewerWaiting for reviewRequest changesApproveApproved

Nothing publishes without review.

New release

1.4.0

Suggested from 12 added icons

BuildingReleased

npm package: React and Vue
SVG sprite and manifest
CDN files
PNG on demand

Every version stays available, so you can roll back.

In your app

$ npm update @acme/icons

import { Bell, Search } from "@acme/icons/react";

<Bell size={20} />
<Search size={20} />

12 icons go in. 12 components come out.

Each approved icon becomes a component with the same name in React and Vue, plus a raw SVG and a sprite entry. Nothing is hand-written between the registry and your code.

bell.svg<Bell size={20} />
folder.svg<Folder size={20} />
heart.svg<Heart size={20} />
home.svg<Home size={20} />
mail.svg<Mail size={20} />
search.svg<Search size={20} />
and 6 more

@acme/icons1.4.0

react/12 components and types
vue/12 components and types
svg/12 raw files
sprite.svg
manifest.json

$ npm install @acme/icons

import { Bell, Folder, Heart, Home, Mail, Search } from
  "@acme/icons/react";

AI draws. Your set decides what ships.

A generated icon is only useful if it matches the rest of the set and someone has approved it. So new icons will come through the same style check, review and release as everything else. Agents can already see your sets; drawing new icons is what we're building next.

An agent asks
"Add a download icon."
Planned
Drawn in the set's style
From the set's own stroke, caps and grid.
Planned
Style check
The same linter every upload goes through.
Today
Human review
A reviewer approves or sends it back.
Today
Next release
Ships in the package with everything else.
Today

What an agent gets today

Connect an MCP client with an API token and it can list your workspace's sets, their package names and latest versions, so it reaches for the real icons before drawing its own SVG. It is read-only.

What no agent can do

Publish, or approve. Tokens can read and propose; approving stays with a reviewer in the dashboard, for people and for agents alike.

Hand off the set, keep the rest separate

Agencies keep a workspace per client. Freelancers invite the designer or developer they work with. Each person gets a role, and each set is private or public.

Member: Browse sets, upload icons and propose changes.
Reviewer: Everything a member does, plus approving or rejecting changes.
Admin: Manage members, API tokens, billing and settings.
Owner: Everything an admin does, and can appoint other owners.

Private sets install with an API token and are served through expiring links.
Tokens can read and propose. They can never approve.
An audit log records who changed what.

What access control does not do: anyone who can read an icon can copy it. Vectoad decides who sees and changes a set, not what they do with the SVG once they have it.

What works today, and what's next

Available now

Dashboard: sets by project, upload, categories, review inbox, releases, icon canvas
Style linter on every upload
Figma plugin: pull icons into files, send icons for review
npm packages (React and Vue), SVG sprite, CDN and PNG
Roles, invitations, private and public sets, scoped API tokens, audit log
MCP server: connect an agent and list your sets (read-only)

On the roadmap

None of this ships yet.

Shareable preview pages
A page for reviewing a set and handing it to a client.
More MCP tools
Search icons, fetch usage snippets, propose icons.
AI icon generation
New icons drawn in your set's style, arriving as proposals.
More outputs
Svelte, web components and an icon font.

Free while we're in early access

Paid plans (Pro, Team, Agency) launch after early access. Pricing will be shown before anything is charged.

Early access

Icon sets with upload, cleanup and style linting
Review workflow with roles
Versioned releases with a changelog
React and Vue npm packages, CDN, sprite and PNG
Figma plugin: pull sets and send icons for review

Get started

Pilot program

For teams and agencies that want help getting their library in shape.

Hands-on setup of your icon library
Founding pricing, locked in for your first year
A say in what we build next

Join the waitlist

Questions

Do I need Figma?

No. You can upload SVGs directly. The Figma plugin is optional: it pulls approved icons into your files and sends new ones back for review.

Can my icons be private?

Yes. Each set is public or private. Private sets install from our npm registry with an API token and are served through expiring links. Public sets can be read by anyone.

Which frameworks are supported?

React and Vue components today, plus raw SVGs, a sprite and PNGs. Svelte and web components are coming soon.

What happens to my icons if I leave?

They're yours. Every release is plain SVG files, a sprite and a manifest that you can download, so nothing is locked in.

Can AI agents create icons today?

Not yet. The MCP server connects an agent to your workspace and lists your sets, read-only. Generating icons in your set's style is on the roadmap, and when it ships, every generated icon will arrive as a proposal that a person reviews.

Where is my data stored?

We host on Hetzner, Neon and Cloudflare, in regions to be confirmed (placeholder). See the Privacy Policy for details.

Custom icon systems that are easier to create, review, release and install.

Get started free

Not ready to sign up?

Get early access and founding-pilot pricing.

Custom icons. Ready for production.

Custom icons pass through too many hands

Drawn

Kept in a set

Exported

Checked on the way in

Zipped

Reviewed

Handed off

Released

Pasted into code

Installed

One set, three ways in

Make the set, keep it in order

Install the set like any package

Point your coding agent at the real set

From Figma to npm install

Create or import

Check and refine

Review

Add 12 icons

Release

1.4.0

Install

Add 12 icons

1.4.0

12 icons go in. 12 components come out.

AI draws. Your set decides what ships.

An agent asks

Drawn in the set's style

Style check

Human review

Next release

What an agent gets today

What no agent can do

Hand off the set, keep the rest separate

What works today, and what's next

Available now

On the roadmap

Shareable preview pages

More MCP tools

AI icon generation

More outputs

Free while we're in early access

Early access

Pilot program

Questions

Not ready to sign up?