The problem
Architecture, operations and business slides lean on icons. Authors usually reach for one of two things, and both go wrong:
- Emoji look different on every machine, ignore the theme, and carry a tone a board slide doesn’t want.
- Pasted vendor logos are multicolored pictures that clash with the palette, blur when printed, and come with their own license terms.
What you want is a small, clean drawing that says “database” or “queue”, in the slide’s colors, at the size of the words around it.
The idea
- You write a word in inline code.
`^{database}`draws a database icon. A few more words, in any order, style it:c3picks a color from the deck’s chart palette,lgmakes it bigger,etchingswitches to an outline. - It’s drawn, not typed. Every icon is an SVG drawing, so it’s sharp at any size and takes its color from the theme — light, dark or print.
- Roles, not brands. The set is about 250 icons from Tabler, an open-source (MIT) icon library, curated for architecture and business slides: compute, storage, data, network, security, delivery, people and more. There are deliberately no vendor logos. A service is a role icon beside its name: S3 is a
bucket, Lambda afunction. - It goes where labels go. Inside a pill — one of Lattice’s small inline labels, written
{S3, c4}—icon=bucketleads the label. On a flowchart, hub-and-spoke or state-chart node, it sits beside the node’s name. - It costs nothing until you use it. The drawings load only for a deck that writes an icon.
How to use it
Icons are on in every deck. Write one in inline code:
Raw files land in `^{bucket, c4}` S3.Style it with words, in any order:
| Word | Does | Default |
|---|---|---|
c1 … c12 | A color from the deck’s chart palette | c1 |
sm, md, lg | Size, relative to the text | md |
framed, bare | A tile behind the icon, or the lines alone | framed |
pigment, etching, tone | Solid tile, outline, or pale tint | pigment |
square, rounded | The tile’s corners | square |
label="…" | What a screen reader says | the icon’s name |
Inside a pill, and on a chart node:
`{S3, icon=bucket, c4}`
- Gateway `{diamond, c2, icon=gateway}` => QueueTo style every icon in a deck at once, set icon: bare etching in the deck’s front matter (the settings block at the top of the file). In the Studio, the editor suggests icon names as you type after `^{ or icon=, with each drawing beside its name.
Where else it fits
Icons like these suit any slide that names parts of a system or an organization: cloud and system architecture, data pipelines, security reviews, monitoring, release pipelines, org charts and business models. Tabler itself is a widely used open-source icon set for web interfaces.
How Lattice uses it
No slide type requires the plugin, but three chart slides are designed to use it: the flowchart, hub-and-spoke and state chart all take an icon per node. Pills take icon=. With the plugin switched off, a pill shows its label alone and a node shows its name.
What it doesn’t do
- No vendor logos.
^{s3}stays as code, and the deck linter suggestsbucket. Vendor marks are multicolored and come with their own terms. - A curated set, not every Tabler icon. And no icons that spell out letters, like
apiorwww. - One color per icon, on purpose.
- An unknown name stays as code, and the linter suggests the nearest names.
- Icons shouldn’t carry meaning alone. Pair each with a word, so the slide still reads without it.