Icons & Logos

What it is

Open Icons & Logos in the sidebar, beside Components and Book. It has two tabs: Icons (below) and Logos (the Brand’s logo sets, see Logos).

On the Icons tab, every icon of the Brand is a tile; search by name or tag, filter by category or status, and choose one to see it at 16, 24 and 48 pixels with what’s worth knowing about it (a different grid from the rest of the set, not square, fixed colours, heavy files).

Icons belong to the Brand, so every theme’s releases carry the same set.

Adding and uploading

Add icons, then Paste one SVG’s code with a name, or Upload files to choose or drop many .svg files at once (up to 300; names come from the file names, and a name that’s taken gets -2). You see each one cleaned before anything is saved.

Cleaning keeps shapes, paths, groups, gradients and masks, and removes anything that could run code or load another file: scripts, event handlers, style sheets, HTML inside the SVG, links, embedded pictures, animation, comments and editor leftovers. Every change is listed in plain words. A viewBox is made from the width and height when there’s none, and the icon scales to any size.

Follow the text colour (on by default) turns an icon drawn in one fixed colour into currentColor, so it takes the colour of the text around it. Multicolour icons keep their colours.

Icons from a public set (a CDN link)

Add icons, then From a link: paste a link to a package or a folder on jsDelivr or unpkg (like https://cdn.jsdelivr.net/npm/lucide-static/icons/), to one SVG, to an SVG sprite, or to a JavaScript or JSON file (.js, .mjs, .cjs, .json, or jsDelivr’s /+esm), then Open. Or start from a well-known set (Lucide, Heroicons, Phosphor, Tabler, Bootstrap Icons, Simple Icons, Material Symbols, Material Icons, Font Awesome Free). Links work from cdn.jsdelivr.net (npm packages and GitHub repos), unpkg.com and raw.githubusercontent.com.

A link from somewhere else is read for what it is, with the link to use as one click: a page on the jsDelivr website or npm, a GitHub page, esm.sh, Google Fonts, Iconify or an icon set’s own site. A font, a stylesheet or a picture says so and offers the set’s folder, or the same icons as SVG files.

Many packages (MUI’s icons, react-icons, Lucide or Tabler for React, Heroicons for React, Phosphor for React, Font Awesome’s JavaScript packages, Iconify sets) have no SVG files, only JavaScript or JSON. Stoaken reads the drawings out of that code as text, without ever running it, rebuilds each one as a plain SVG and cleans it like an upload. The dialog says what it found (“This package has no SVG files… 2,164 icons in the Filled style”), and when the same icons come as SVG files too it offers that package as one click. Very large files are read up to 12 MB, and anything cut or left out is said.

The set is read in your browser, straight from the CDN. The version is always pinned: a link without one is pinned to the newest, and the dialog says which. When a package has several folders, styles, weights or sets (Outlined, Rounded and Sharp; regular and bold; one file per set), they show as buttons and the dialog says which one is showing. Search, pick some or all (up to 500 at a time), and each drawing is cleaned exactly as an upload is. A name this Brand already has offers Update it with the new drawing, Add it under another name, or Skip it.

The icons are copied into the Brand, never linked live, so a release and its exports never change because a CDN did. Each one remembers where it came from: the pinned link, the package and version, and the licence read from the package. The icon shows it as Copied from, and every export carries a credits notice (a comment at the top of single files, NOTICE.txt in a zip, the source in the JSON manifest).

From public icon sets above the grid lists each set with its licence. Check for updates asks the CDN for the newest version (one request). When there is one, Review the update shows which of your icons changed (before and after), which are new and which the new version removed, and changes nothing until you choose Update: changed drawings are replaced in place (names and links kept), new ones are added only if you tick them, removed ones are deprecated only if you tick that. Not now leaves everything as it is.

Managing and linking

Rename

Lowercase with dashes (arrow-right). Code uses the name, so a release that renames an icon is flagged in its review.

Tags and Category

Words people search for, and a group the filter shows.

Colour token and Size token

The tokens an icon is drawn with in the exports: CSS, SCSS and Tailwind use them as variables (falling back to the text colour and 1em).

Used by

The components that draw the icon, chosen by component, so a Figma Button and a code Button are told apart. Save links keeps them.

New drawing

Paste a new SVG; Replace the drawing cleans and saves it, keeping its name and links.

Deprecate

Marks it deprecated with an optional replacement and reason. It stays in every export, marked deprecated, so code keeps building while people move. Bring it back undoes it.

Remove

Takes it out of the working copy and the next release. Releases already out keep it.

Editor

Adds, uploads, changes, links, deprecates and removes icons.

Everyone

On the Brand: browses, searches and exports them.

Icons and Figma

From Figma: select your icons (small, vector-only components, or the frame that holds the set) and send them with the Stoaken plugin. Each becomes one icon here, cleaned as an upload is (source Figma), never a component per icon; the components sent with them link to the icons they use (Used by). The import Review shows every icon as new, changed or already here, and for each name clash offers the fix: update the existing icon with the new drawing, add it under another name, or skip it.

Into Figma: the plugin’s Icons tab brings the Brand’s icons in as components (the live release, or the working set), sized by their viewBox and bound to the colour token’s variable. Bringing them in again updates each one in place, so instances follow; an icon removed here is marked retired in Figma, never deleted. See Keep Figma in step.

Releasing icons

A release is the tokens plus the Brand’s icons and logos. Icons belong to the Brand, so they ride ONE theme’s release: the Brand’s main theme (its first theme, the one every Brand starts with) by default, or another theme’s when you include them there on Propose a release. A release with only icon changes is fine. Its review lists what changed against the set the Brand last released: added, changed, renamed, deprecated and removed, before and after side by side, with Open Icons.

The version counts them: adding an icon is minor; a new drawing, tags, a category, links or deprecating one is a patch; removing or renaming one is major and breaking (code uses its old name), and with velocity on it waits for a reviewer.

Changes that no release carries yet show at the top of the page as Not released yet, with Propose a release, which opens the main theme’s release with them listed. Once a release that carries them goes live (in any theme), they no longer show here. Exports, the Figma plugin and the Brand Book read the released set, so what ships is what was approved.

Logos

A brand rarely has one logo: a mark with text, the mark only, a favicon, an app icon, a simplified version, one for light backgrounds and one for dark, a mono version. The Logos tab keeps them in sets you make yourself, named for where they’re used (Web, Print, Social, App, or anything else). Nothing is required: the tab lists the usual variants as a hint, and Start a set from a suggestion: makes Web, Print, Social or App with a note, then offers its usual logos as one-click names. Or make a New set with any name.

Add a logo in a set, then Upload a file (SVG, PNG, WebP or JPEG, up to 3 MB), a CDN link (one file in a package on cdn.jsdelivr.net or unpkg.com, or on raw.githubusercontent.com: pinned to a version, its licence kept), or Any link (any https address). The file is read in your browser, never through Stoaken’s servers, then copied into Stoaken, never linked live. Many sites don’t let other sites read their files from a browser; then the dialog says so in plain words and offers Upload the file instead.

Every file is checked: its type is read from the file itself, and an SVG is cleaned the same safe way as an icon (no scripts, links or embedded files) but keeps its colours exactly as drawn. You see it before Add the logo. Give it any name, a Note on usage, and what it’s Meant for: Any background shows it on light and dark side by side; Light backgrounds or Dark backgrounds shows it only on that one, here, in its details and in the Brand Book (downloads are the same file either way); open it later for its Smallest size and Clear space, to move it to another set or along its set, to give it a New file (Use this file), or to remove it.

Downloads are made in your browser: Download saves one logo; Download set saves a set as a zip (files named brand-set-logo, a README.txt saying what each is for, and a manifest.json); Favicon pack turns a logo (a square one works best) into favicon.ico, PNGs for browser tabs, the Apple touch icon, web app icons, site.webmanifest and the <head> snippet.

Logo sets ride releases as icons do (the main theme’s release by default): a release carries the sets as they are when it’s proposed, its review lists logos added, changed, renamed, moved and removed (with Open Logos), and changes no release carries yet show as Not released yet. Adding a logo or a set is minor; a new file, note or details, a move or a set renamed is a patch; removing or renaming a logo, or deleting a set, is major and breaking. The Brand Book shows the sets the Brand last released, each logo on the background it’s meant for (light and dark for any) with its note and a download; a Brand with no sets shows its mark there instead.

Editor

Makes, renames, reorders and deletes sets (Delete the set removes its logos too), and adds, changes and removes logos.

Everyone

On the Brand: sees the sets and downloads them.

Exporting

Export offers the same platforms as the token export: Released (the newest live release that carries icons) or the Working copy, built in your browser, then Download.

Web

SVG files (a zip), an SVG sprite, CSS classes (icon icon-arrow-right, a mask in the text colour), an SCSS map with an icon() mixin, a Tailwind 3 plugin and Tailwind 4 utilities.

JavaScript

React components (TSX) with an Icon component and the IconName type, and a JavaScript or TypeScript module of every icon’s viewBox and paths.

Apple

A SwiftUI StoakenIcon enum and an Xcode asset catalogue (Icons.xcassets, vector, rendered as templates).

Android

Jetpack Compose ImageVectors and Android vector drawables (res/drawable).

Tools and pipelines

A JSON manifest in the W3C style.

In a pipeline, stoaken icons export and the REST API (/api/brands/<id>/icons/export) give the same files; the GitHub Action’s icons input runs the CLI. See the CLI docs.