Skip to content
Documentation ▾

The studio

Icons

Lucide, Tabler, Phosphor, Material Symbols, Simple Icons, Twemoji and a hundred more, searchable from inside the studio. An icon lands as the vector paths it is, so it takes a stroke, a keyframe, a morph and a draw-on like anything else you drew.

Where it is

Open the Plugins panel in the left rail and pick Icons. It opens as a floating window you can dock into the panel, and nothing about it loads until you open it: the set list is one small request, a set’s names arrive when you open that set, and each icon’s drawing arrives when it scrolls into view. Everything fetched is kept by the browser, so a set you browsed once is there offline the next session.

What is included

The catalogue is the open-source icon world as published in the Iconify data format. AtomCut offers every set whose licence allows commercial use in your artwork and hides the rest, so nothing you drop can put a condition on your export. As of writing that is just over 200 sets and 330,000 icons. The panel groups them the way you look for them:

FamilySets, for exampleWhat they are
InterfaceLucide, Tabler, Phosphor, Heroicons, Feather, Iconoir, Solar, Remix, Bootstrap, Hugeicons, Carbon, FluentSingle-ink UI glyphs on a 24px or 16px grid. Most are line icons.
MaterialMaterial Symbols, Material Design IconsGoogle's families, in outlined, rounded and sharp variants.
EmojiTwitter Emoji, Noto Emoji, Fluent EmojiFull-colour artwork. They keep their own colours.
LogosSimple Icons, SVG Logos, DeviconBrand marks. Check the brand's own guidelines before you use one commercially.
Flags & mapsCircle Flags, Flag IconsCountry flags as vector artwork.
ThematicGame Icons, Medical Icons, Weather Icons, AcademiconsDomain sets that don't fit a UI grid.
ArchiveFont Awesome 6, Ionicons 4, Typicons and other retired versionsSets upstream no longer maintains. Still usable; not where to start.

Every set shows its licence on its cover. A few (Solar, Font Awesome Free) are CC BY: they are free to use, and the panel says so and names who to credit. Sets under non-commercial, share-alike or GPL terms are not offered at all.

Line, solid, or colour

An icon is drawn one of three ways, and it matters for what you can do with it afterwards. A line icon (Lucide, Tabler, Feather, the outline variants of Phosphor and Heroicons) is a stroke along a path with no fill. A solid icon (Material, Font Awesome, the filled variants) is a filled silhouette. A colour icon (emoji, logos, flags) carries its own palette and ignores the ink you pick.

The All / Line / Solid / Colour chips filter a search or the home page by that. Inside one set the chips disappear, because the set is what it is. The footer tells you which kind the icon you picked is, as a #stroke, #fill or #color tag.

What lands on the canvas

There is no icon layer type. An icon arrives exactly the way a dropped .svg does: every disjoint piece becomes its own path layer, and two or more pieces arrive inside one group named after the icon. That is the whole point. A path layer already has nodes you can edit with the pen, a stroke list with trim, dash, wave and taper, fills, effects, keyframes, morphing and a layer animation. An icon gets all of it because it is one.

A line icon lands with its stroke on each piece, in the ink you chose. A solid icon lands with a fill. Change either later in the Design tab like any vector layer, or pick a different ink in the panel before you drop the next one.

The layers remember where they came from. Each path an icon becomes carries the icon's id, its set's licence and who to credit, so a rename, an ungroup, a flatten or a paste into another project never loses it. Select any of them and the Design tab's Sourcesection names the icon, the set and the licence; the Export dialog lists every set the export uses, marks CC BY sets as required, and copies the credit lines in one click.

The defaults every icon lands with

The footer of the panel holds five settings. They apply to the next icon you place, and they are remembered on this device.

SettingWhat it does
InkThe colour currentColor resolves to. Pick a swatch, or link a colour variable: every icon then follows the variable, and retinting the variable retints them all.
SizeThe landing size in frame pixels, measured on the icon's longer side. Default 128.
PenFor line icons only: override the set's stroke width, in the icon's own units (Lucide draws at 2 on a 24 grid). Off means as drawn.
InA whole-layer entrance applied to the placed group. Draw On is made for this; every other layer preset works too.
OutThe exit, same gallery.

Draw On

Draw Onis a layer animation that inks the outline over the entrance instead of moving the layer. Put it on a line icon and the strokes draw themselves; put it on a group and the whole icon draws as one drawing, bottom piece first, the way it was authored. It is in the Animate tab of any path, shape or group that holds one, next to the fades and slides, and the panel’s In chip starts on it.

KnobWhat it does
OrderTogether: every strand from 0 to 1 at once. One by one: the pen never lifts, running along the total length so a long strand takes longer. Staggered: equal shares, each starting a beat after the last.
StaggerStaggered only. How far into one strand's share the next begins: 0% is together, 100% is back to back, 150% leaves a pause between strands.
PiecesBottom first (the order the artwork was drawn in) or top first.
Start atWhere along each strand the ink begins, 0% to 100%.
DirectionForward, backward, or both ways out of the start point. A closed strand wraps around; an open one splits.
FillWhat the fills do while the outline draws. Keep leaves them; Fade along fades them in with the progress; Fade late brings them in as the last of the line lands.
PenA solid icon has no stroke to draw, so Draw On borrows one: its silhouette is inked in its fill colour at this width, then the fill arrives per the Fill setting. Does nothing on a layer that already has a stroke.

That is the whole-icon control. For a piece that should move on its own, select it and give it a Draw On of its own: a child’s animation wins over the group’s, and clearing it hands the piece back.

The duration and easing are the layer animation’s own, so the timeline’s in-handle drags it, the exit plays it backwards, and switching to a fade keeps the timing you set. A draw-on and a stroke trim compose: the trim is cut from what has been drawn so far, which is what lets a dash of light chase a half-drawn logo. Video, GIF, PNG and SVG exports render it from the same brain as the canvas; Lottie bakes it as one trim per strand, keyed once per frame, so the same drawing plays in a player with no AtomCut in it.

Searching

The home page is the families, each a row you can scroll sideways with a View allat the end. Typing anything searches every set at once, server-side, so “arrow” over 300,000 icons downloads only the arrows. Inside a set the search is instant and local. Names are hyphenated the way each set names them (arrow-up-right), and the footer shows an icon’s tags, its set and its licence.

Placing an icon

Do thisResult
Drag onto the canvasLands centred where you let go, in the frame under the cursor, on top.
Drag onto a laneLands at that time, on that lane, inside that lane's group if it has one.
Double-click, or select and press InsertLands at the playhead in the open comp, above the current selection.
Enter on a focused tileSame as Insert.

The drag shows the actual icon at the size it will land, not a box promising one. Star an icon to keep it under Starred; anything you place shows up under Recent.

One limit, named

Search matches names. Lucide knows that houseis also a home, but that synonym list is not in the data AtomCut reads yet, so searching “home” finds the sets that call it home and not the ones that call it house. Try the other word.

Next: the stroke pipelinean icon’s lines run through, or keyframe a piece of one.