name: logomarks description: Design new geometric logomarks (symbols, lettermarks and monograms) as clean single-colour SVG to the standard of the free Logomarks set at logomarks.ai: the 512 grid, exact fit, the construction kit, the house checks and the set's taste. Use when designing new geometric marks, drawing or iterating on a logo mark, brand symbol, lettermark or monogram, checking an SVG mark against the house rules, or editing, remixing or glitching one of the existing Logomarks.
What does logomarks do?
3,797 free geometric logomarks by David Sherlock, all drawn to one standard: https://logomarks.ai (CC0, public domain). This skill is how to design new marks that belong in that set, and to check, edit and reuse the existing ones. (To pick an existing mark for a project and set it up, use the Logomarks picker skill.)
Contents of this folder:
SKILL.md: this file.scripts/kit.mjs: the geometry kit the set was built with (shapes, real booleans, weaving, iso cubes and iso solids). Needsnpm install polygon-clipping(apackage.jsonis included).scripts/fit.mjs: sizes any SVG mark to the standard and checks it. No dependencies.scripts/examples.mjs: six real marks from the set, rebuilt with the kit.examples/: their output, already fitted.
Using the existing marks
The site doubles as a static API. Nothing to install:
https://logomarks.ai/marks.json: every mark'sname,slug,file,tags(round, square, letter, number, symmetric, radial, solid, light, wide, tall, new) and drawn size.https://logomarks.ai/svg/<slug>.svg: the mark itself.https://logomarks.ai/marks/<slug>: its page, with PNG, favicon and brand mock-up downloads.https://logomarks.ai/logomarks.zip: all of them.
Before designing from scratch, check whether an existing mark (or a remix of one) fits the
brief. Fetch marks.json and filter by tags and names.
The standard (non-negotiable)
-
viewBox="0 0 512 512". -
The mark's longest side is exactly 448, centred: a 32 margin, measured on the real outline. A wide mark is 448 wide and shorter; a tall one is 448 tall. Never size by eye: run
fit.mjs. -
Measure the geometry, never the canvas. While you build, a mark can spill past 0–512 (iso solids and tall stacks usually do). That's fine as long as the fitting step measures the real outline. Don't find a mark's bounds by rendering it inside its viewBox: anything outside is invisible to that render, the "fit" then leaves it outside, and the final file is cut off at the edge.
fit.mjsmeasures every point and curve, so it handles marks drawn anywhere;fit.mjs --checkfails any mark that still runs off the canvas. -
The whole file:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor"> <path fill-rule="evenodd" d="…"/> </svg> -
Filled paths only, in
currentColor. No strokes (expand them),<g>,transform,style, masks, clip paths, IDs or text. Holes are real holes (evenodd or reversed winding), never a shape painted in a background colour. -
Coordinates to one decimal place.
Workflow
- Read the brief. Name, what the business does, the feeling (calm, technical, playful, premium) and where the mark will live (app icon, favicon, signage). Small-size use pushes towards bold marks with few parts.
- Pick one family (below). Don't mix families in one mark.
- Write 4–6 one-line ideas. Each must be one idea: "a disc split by an S-shaped channel", not "a disc with an S, a dot and rays". Lettermarks use the name's initial.
- Build the best 2–3 with the kit: a short script that combines primitives with
booleans and calls
write(). Only hand-write path data for very simple marks (see "Writing paths by hand"). - Fit:
node scripts/fit.mjs out/sizes them all to the standard. - Review against the checklist. Look at each one rendered, at 32 px and at 512 px. Cut anything that fails, and iterate on the survivors.
- Deliver each mark with a short, unique name (one or two words: "Cube Window", "Moonrise"), its one-line idea and the SVG.
What the set favours
From the owner's reviews: bold solid marks with one negative-space idea and chunky, even gaps; iso solids and cubes; detailed marks built from one repeated element; minimal dot and pixel marks; cute ceramic-figurine animals. Above all, anything that looks like a modern tech, AI or techwear brand: precise, engineered, a bit futuristic. Interlocking bands, modular tiles (the favourite), monoline and multiline drawings, chamfered and oblique cuts, precise rings and orbits, grid systems, stencil and utility letters, glitch slices, monograms. But never a UI, network, chip or circuit icon, a neural-network node graph, a brain, or anything near a known AI mark (a hexagonal knot, an asterisk, a four-point sparkle).
The families
Every mark in the set sits in one family. Once you have picked one (step 2 of the workflow), read its section in references/families.md before you build: how it is constructed, its numbers on the 512 canvas, and what was tried and cut. Sections this file names in quotes ("Iso solids", "Glitch editions") are there too.
The families: Bold negative space; Swiss grid; Stencil letters; Monograms; Serif letters and monograms (batch 230); Letter badges; Woven; Iso cubes; Iso solids; Overlaps (XOR); Line (monoline); Multiline (tracks); Oblique; Dot grids; Animals; Animals in the house styles; Leaf and seed; Halftone solids; Dither taper (batches 167, 186); Detailed; Inflated; Glitch slices; Shear and Wire letters (batches 112–113); Inline letters (batch 124); Rail and Trace letters (batch 166); Echo letters (batch 202); Tech brand marks (batch 213); Modular; Orbits; Letter symbols, symbols, hidden creatures and forms (batch 168); Techwear (batch 107); Industry marks (batches 95–97); Tried and dropped (batch 51); Folded (origami); Fold seams and straps (batch 170); Iso · Planes (batch 215); Bold · Emblems (batch 216); Bold · Y2K (batch 232); Letters · Blackletter and Bold · Shatter (batch 231).
The kit (scripts/kit.mjs)
Shapes are polygon sets on the 512 canvas (y points down, C = 256 is the centre).
| Function | What it makes |
|---|---|
circle(cx, cy, r), ellipse(cx, cy, rx, ry, deg) | Discs |
rect(x, y, w, h), rr(x, y, w, h, r | [tl, tr, br, bl]) | Rectangles, rounded or partly rounded |
squircle(cx, cy, R, n) | A superellipse: the soft square of badges (n 4.5) |
regular(cx, cy, r, sides, deg), roundPoly(points, cut) | Regular polygons; any polygon with rounded corners |
poly([[x, y], …]) | Any polygon |
annulus(cx, cy, r, w) | A ring of width w; r is the centre line, not the outer edge |
sector(cx, cy, r, a0, a1), arcBand(cx, cy, r, w, a0, a1, round) | A pie slice; a thick arc, optionally with round ends |
lens(cx, cy, length, width, deg) | A vesica / leaf |
drop(centre, r, tip) | A teardrop |
pill(a, b, w), bar(a, b, w) | A line with round or square ends, for shapes or for cutting gaps |
stroke(points, w), sample(f, t0, t1, n) | A thick polyline (variable width allowed) and points along a curve |
weave(strands, w, gap), ring(cx, cy, r) | Over-under strands |
iso(edge), cubes(list, edge, ox, oy, gap) | Isometric points; cube arrangements |
isoPrism, isoBlock, isoRing, isoPile | Iso solids (see "Iso solids") |
dedupe(points) | Drops repeated points before stroke() |
grow(shape, d), soften(shape, r1, r2) | A true round offset (negative shrinks); round inner corners by r1 and outer by r2 (puffy forms) |
robust() | Call once at the top of a script: every boolean then retries with a tiny jitter when polygon-clipping throws |
grown(shape, w), over(back, front, w) | The shape plus a 2w band (subtract it to cut a part free); front in front of back, cut free by w |
egg(cx, cy, rx, ry, deg, k) | An egg, for figurine bodies |
slices(shape, cuts, shifts, { deg, g }) | Glitch slices: cut into bands by gaps g, each band slid along the cut |
BADGE, knockout(kind, letter), clearance() | The seven badge shapes; a letter centred and knocked out, shrunk if it comes closer than 50 to the edge |
PIX7, pixels(rows, p), checker(rows) | The chunky 8-bit alphabet; a pixel glyph as one solid; any corner-only contacts |
dsegs(segments, t, g) | Display segments with pointed ends, parted by an even gap |
SKEL, skelSolid(k, H, T) | One geometric sans as centrelines; stroked solid with square ends |
tracks(pts, { n, pitch, w }), fillet(pts, r), balloon(pts, w0, w1) | Parallel tracks; a polyline with round corners; a balloon stroke |
filletClosed(pts, r), trackLoop(pts, { n, pitch, w }) | A closed polygon with every corner filleted (r per corner allowed); three tracks round a closed outline (pitch 42 for animals) |
walk(at, deg, steps) | A turtle path: ['L', length] and ['A', turn°, radius] steps, arcs of exact radius (open Track animals) |
seeded(str) | A seeded Math.random: set it per mark so robust()'s jitter, and the batch, regenerate byte-identical |
svgShape(svgText), pathRings(d) | Read a mark's SVG (or path data) back into a shape: curves and arcs sampled, evenodd or nonzero holes honoured |
glitchMark(svgText, { kind, cuts, shift, deg }) | A glitch edition of an existing mark (see "Glitch editions") |
U, D, I, X | Union, subtract, intersect, exclude |
rot(shape, deg, cx, cy), rotN(shape, n), move, scale, flipX | Transforms; rotN repeats around the centre |
polar(r, deg, cx, cy) | A point at an angle (0° = right, 90° = down) |
segmentLines(lines, { t, box }), segments(nodes, strokes, o) | Segment letters: every stroke its own segment, joints parted along the bisectors |
isoPieces(pieces, u) | Unit-cube pieces with seamless faces, gaps only between pieces and at creases (Iso Lock) |
blocks(list, W, H), nest(W, H, n, sides, cut) | A rectangle tiled by solid blocks with an even gap (Golden and the Blocks); a peeled subdivision |
linkage(bars, pins) | Capsules pinned together, each over the ones before |
write(file, shape), svg(shape) | Output |
Cut gaps by subtracting bar()s (or a thin annulus()) of the gap width. Float
a part in a moat by subtracting a scaled-up copy of it, then adding the part back (Hex
Gem). If polygon-clipping throws "Unable to complete output ring", shapes share an exact
edge: nudge one by 0.01. If that isn't enough, retry the whole build with a tiny jitter
on the outline and the depth (a few tries from 1e-4 up to ~0.02), or redraw the face
as one clean outline instead of a union of rectangles. "Degenerate segment at [NaN,
NaN]" means a polyline has a repeated point: dedupe() it. Kit helpers (stroke(),
pill(), grown()) call the booleans too, so a jitter in your own code can't reach them:
call robust() once instead, and failures inside them retry on their own.
grow() before batch 64 did nothing useful: it simplified each ring with its first point
repeated at the end, which collapsed the ring to that one point, so it only added or removed a
circle there. Fixed; if a copy of the kit predates it, grow(rect(0, 0, 100, 100), -10) shows it.
Check big, on both grounds. Small light-on-dark thumbnails mislead: an opening can look filled, or a sliver can hide. Before cutting or shipping a mark, render it at 400 px, dark on light.
Writing paths by hand
For a simple mark you can write the path directly:
- A circle is two arcs:
M cx-r cy a r r 0 1 0 2r 0 a r r 0 1 0 -2r 0 z. - A ring is two circles in one path with
fill-rule="evenodd". The inner one becomes a hole. - With evenodd, overlapping parts also become holes. For overlapping solids, either merge them in the kit or use the default nonzero rule with every solid drawn clockwise and every hole anticlockwise.
- Then run
fit.mjs. Don't try to land on 448 by hand, and don't crop to the canvas: if part of the drawing sits outside 0–512,fit.mjsbrings it back in.
Review checklist
Cut or rework any mark that fails one of these:
- One idea, describable in a sentence without "and".
- Reads at 32 px: gaps don't close up, nothing turns to mush. Nothing narrower than 10 units.
- One gap width and one stroke weight (or a clear 1:2 ratio) throughout. Keep the set's gap (22 units between separate parts): the site's Gap, Weight and Soften controls measure each mark's parts and gaps, and work best when they're even. The one exception is a fold or overlap SEAM of 11 (Crease and Strap marks, under "Fold seams and straps"), and only where the silhouette alone reads at 32 px.
- Never reads as an icon. This is the rule marks fail most. Ask: would it sit comfortably in an icon set (Material, Lucide, SF Symbols)? If yes, cut it, however well drawn. A logomark is an abstract or stylised sign that belongs to one brand, not a pictogram of a thing or an action. Specifically, not a UI icon: no arrows, play, home, gear, nut, bell, lock, download, copy, chat bubble, map pin, Wi-Fi arcs, charts (pie slices too), image/mountain-and-sun, "no entry" slash, spinner-like dot rings, package box. Line drawings of everyday objects slide into icons fast: cup, bottle, glasses, trophy, top hat, rocket, bike and gem all read as icons.
- Not a body part by accident: watch almond and lens shapes between overlapping rings.
- Not a symbol with meaning: no religious, political or occult symbols (hexagram, pentagram, cross, crescent-and-star, triquetra, torii, tomoe, swastika in any rotation), flags or hazard signs (biohazard, radiation).
- Not a famous logo shape, e.g. three orbits around a dot reads as React's atom.
- Not a copy of a known brand's mark, and not a generic stock shape on its own (a plain circle, hexagon, star, swoosh or globe).
- Not a near-duplicate of another mark in the same batch or of an existing
Logomark (check
marks.json). A rotation or mirror of an existing mark counts as a duplicate. The name must be unique too, near-names included ("Quad Bite" against "Bite"). An outline score only catches shapes: the same trick as an existing mark is a duplicate even when it scores low (another sliced disc, another apex-gap A), so look at the existing family's sheet first. - No slivers: no hairline pieces left over from booleans (render it big).
- No stray specks: run
npx logomarks specks <folder>(the set's speck review) and look at every hit rendered large; a leftover speck, sliver or pin-hole goes, a meant small dot stays. -
fit.mjs --checkpasses.
Validate before you hand off
Reading SVG code can't show you a speck, an uneven gap, an off-grid fit or a near-duplicate. Measure them:
npx logomarks check out/ # every house rule; --json for ids, messages and boxes
npx logomarks check out/ --fix # refit to 448, centred (the only automatic fix)
npx logomarks similar out/*.svg # nearest live marks: 0.72+ too close, 0.9+ a near-copy
npx logomarks sheet out/*.svg -o sheet.png # one review card per mark
- Fix every error.
size,centre,clipped: run--fix.markup: flatten to filled paths.speck,sliver,pinhole: each comes with its box; look there, and remove the part in the generator (despeck()) unless it is meant. - Read every warning.
thinandnarrow-gapmean under 10 units: it closes up at 32 px.uneven-gapsmeans a second gap width: make it 22, or a deliberate 1:2. Keep a warning only when you can say why. - Look at the sheet, every card: the mark large on dark and light (findings boxed and numbered), at 32 and 16 px, and beside its three nearest live marks. Too close (amber) means compare the two by eye; a near-copy (red) is cut, and so is the same trick as an existing mark even when it scores low.
- Re-run until
checkexits 0, then deliver.
Build on a mark
Once a mark is chosen (a live slug, found with npx logomarks find calm hexagon, or your own .svg that passes check):
npx logomarks get hex-gem -o mark.svg # the file (CC0); --color '#hex', --size 512 -o mark.png
npx logomarks kit hex-gem --name "Brand" --color '#hex' --font space-grotesk --tagline "…" -o brand/
npx logomarks social hex-gem --name "Brand" --color '#hex' --platforms instagram,linkedin --styles bold
npx logomarks mockup hex-gem --name "Brand" --color '#hex' --object tee -o tee.png
npx logomarks cover hex-gem --recipe aurora --title "Launch" --color '#hex' -o cover.png
kitwrites the mark (SVG on light, dark and colour; PNG 64–2048), favicons (.ico,apple-touch-icon.png, maskable icons, manifest,head.htmlwith the<head>lines), lockups,colors/(CSS, Tailwind, tokens), the social pack,brand.jsonandREADME.md. Openbrand-sheet.pngand look at it before handing the kit over: a light brand colour gets a darker mark on light grounds (it must clear 3:1), and its text colours clear AA.socialwrites every platform's images at its current size, inminimal,boldandpattern(--stylesaddsgradient;--animatedtoo).- Fonts:
inter,space-grotesk,instrument-sans,bricolage-grotesque,instrument-serif,plex-mono(all OFL); for restaurants,fraunces(warm serif: bistro, wine bar),cagliostro(flared sans, set wide: fine dining),limelight(art deco: cocktail bar),shrikhand(retro chunky: diner, brunch, ice cream). mockup --object: card, letterhead, ticket, lanyard, sticker, tote, tee, hoodie, cap, mug, bag, box, poster, vinyl, cd, cassette, phone, laptop, billboard, shopfront.--base blackchanges a garment's or mug's colour.cover --recipe: mark, gradient, tile, stripes, aurora, grid, cutout.--aspect og(default),1:1,16:9.
Make a mark your own
Edit a live mark (or yours) with the editor's own operations; each result comes back fitted and checked:
npx logomarks parts quad-cove -o parts.png # the parts by index: what --ops names
npx logomarks edit quad-cove --ops '[{"op":"delete","parts":[3]},{"op":"round","radius":18}]' -o mine.svg
npx logomarks glitch quad-cove --preset shear --seed 3 -o mine.svg # shear, slice, bands, stepped, lane
npx logomarks combine quad-cove shear-a --op subtract --scale 0.5 -o mine.svg
Edit ops: delete, move, rotate, scale, flip, round, offset, mirror, radial, union, subtract, color, tone (two-tone).
A result that fails a check exits 1: fix the speck or sliver it names, or try another seed. Then run similar.
The tools in this plugin
This plugin runs the logomarks MCP server on your machine (npx logomarks mcp), so everything above is also a tool.
Prefer the tools: they take SVG text or paths, return JSON, and hand back images you can look at. Paths are relative
to the project. Given out, a tool writes the file and returns its path rather than the SVG text.
| Tool | What it does | CLI |
|---|---|---|
find_marks | Search the 3,797 live marks by words, style, tags, industry or letter (no arguments: the values) | find |
get_mark | A mark's SVG in a colour; a PNG to look at with size; a file with out | get |
check_mark | Every house rule on SVG text or files: ids, messages, boxes; fix refits | check |
similar_marks | The nearest live marks, with scores and verdicts | similar |
review_sheet | The review cards, as an image | sheet |
list_parts | A mark's parts by index, box and area, and an image of them numbered | parts |
edit_mark | Edits by part (delete, move, round, offset, mirror, two-tone …); fitted, checked, shown | edit |
glitch_mark | A glitch edition (shear, slice, bands, stepped, lane); the same seed, the same SVG | glitch |
combine_marks | Two marks as one: union, subtract, intersect, exclude, place | combine |
build_brand_kit | The brand kit written to a folder; returns its path and the brand sheet | kit |
build_social_pack | Every platform's images at its size, in three styles; a preview of each | social |
render_mockup | The brand on an object; a preview image, and the full size with out | mockup |
render_cover | An Open Graph image, header or post; a preview image, and the full size with out | cover |
The loop for a new mark: write it, check_mark, similar_marks, review_sheet, fix, repeat until check_mark is ok.
Then look at the sheet before you hand it over.
Asking for marks
Using the Logomarks skill, design 6 marks for "Northfold", a calm, premium fintech app. Two lettermarks on N, two bold negative-space symbols, one iso, one woven. Build them with the kit, fit them, then show each with its name, one-line idea and SVG.
Find three Logomarks that would suit a coffee roaster (round, warm, simple) and show me how they'd look as a favicon.
Licence and credit
The Logomarks set, this skill and its scripts are CC0: use, change and share them freely. Some marks may look like logos you've seen elsewhere. They were drawn by hand over years, for theme demos and projects, and any resemblance is coincidence. Check a mark before you register it as a trademark.
Custom logos and full brand identities: https://logomarks.ai