Blog ·

The icon keychain: a symbol, your handle, and a word in front

The other keychains start from something you bring: a name you type, a QR target, a file you upload. The icon keychain starts from a shelf. Open it and there are a couple of hundred symbols ready to pick. Choose a heart, a paw print, a music note, set your handle next to it, and that is the keychain.

You can still upload your own symbol if the one you want isn’t in the set. Most of the time, though, the point is to skip the file step and just pick.

A shelf of symbols

The icons come from Phosphor, an open icon set. Each one is stored as an SVG path, the same vector format the upload mode accepts, so the builder treats a library pick and an uploaded file exactly the same way. The symbol you choose becomes real geometry (builtinIcon feeds the same vectorizer as an upload), not a pasted picture. That is why it prints with clean edges and keeps its gaps: a heart keeps its dimple, a paw keeps the spaces between the toes.

The picker has a search box, because a couple of hundred icons is too many to scroll. Type “cat”, “coffee” or “music” and the grid filters down to what matches.

Icon, then handle

The layout is a symbol on the left and a short line of text to its right, with a gap between them, both centered on the same line. That is composeIconText, shared with the upload mode. You set the icon’s height relative to the text, and the card sizes itself around the pair. A long handle gets a long card; a single symbol on its own gets a small square one.

And now a word in front

The newest addition is a second text field, this one in front of the icon. Switch it on and the row reads as a word, then the symbol, then your handle: “Team”, a star, “@disip”. The icon shifts right to make room for whatever you put ahead of it, and the card grows to fit.

Under the hood the layout walks left to right with a cursor. It places the leading text, moves the cursor past its width plus a gap, drops the icon, moves past that, then sets the handle. Add or delete the leading word and everything after it slides along on its own. The same applies to an uploaded symbol, not just the library ones, since both take the same place in the row.

Make one

Pick a symbol, add a handle, and if you like, a word in front of it. If you want a custom product like this running in your own shop, that is what disip builds.