Glyphs
The icon on a file node's face — what it is by default, how to move it, and how to replace it for a file type.
The glyph is the flat icon lying on the front face of a file node. It is what makes a badge identifiable from across the graph, before the filename is legible.
What you get by default#
You don't choose a glyph to begin with. Every file already has one: its own language symbol, drawn in white.
The common languages have real marks — HTML, CSS, JavaScript, TypeScript, React, Python, Go, Rust. Everything else falls back to the same file-type icon Semantix uses in the file tree, whitened, and anything with no icon at all gets a generic file symbol.
That default is per file, resolved as the graph is built. It is the reason "All files" has no glyph picker: there is no single icon to set there, because each file is already bringing its own.
Moving and tinting it#
Six controls in the Glyph section, and these do work at every scope, including All files.
| Control | Range | Default | What it does |
|---|---|---|---|
| Color | colour | #ffffff |
Tints the icon. |
| Size | 0.2 – 2 | 1 | Scales the icon on the face. |
| Opacity | 0 – 1 | 1 | Fades it toward invisible. |
| Offset X | −0.5 – 0.5 | 0 | Slides it right (positive) or left. |
| Offset Y | −0.5 – 0.5 | 0 | Slides it up (positive) or down. |
| Clip to shape | on / off | off | Cuts anything overhanging the silhouette. |
Offsets are fractions of the node's size, so an offset stays put when you scale nodes up or down.
Clip to shape matters once you start scaling or offsetting. Without it, an icon larger than its badge simply overhangs and floats past the outline. With it, the overflow is cut away exactly at the silhouette, like a sticker trimmed to the shape — which is also a look worth having deliberately: an oversized glyph clipped to a hexagon fills the whole face.
Important
Color multiplies, it doesn't replace. White is the neutral value, which is why the default looks like no tint at all. On the built-in white symbols multiplying behaves exactly like painting them. On a colourful SVG you uploaded yourself it does not — it darkens and skews the colours already in the file. If you want your uploaded icon to look the way you drew it, leave Color at white.
Replacing the icon for a file type#
The picker only exists when a file type is selected in the scope selector. Choose .ts and a
block appears headed glyph icon · per type, captioned glyph for .ts — pick or upload.
Fifteen built-in symbols are offered: Circle, Square, Triangle, Hexagon, Diamond, Star, Box, Braces, Code, FileText, Database, Terminal, Zap, Flame, Sparkles. They're line-art, so on the shield they read as thin white outlines rather than solid marks.
Beside them is an SVG upload button, on the same terms as shape uploads:
.svg files, under about 1 MB. Unlike shapes, a glyph SVG may be as colourful as you like — it is
drawn as an image, not extruded.
A reset button appears next to the picker once that type has its own icon, and removes it. The type goes back to its language symbol.
Pick a glyph and every file of that type wears it. This is how you make configuration files look like configuration files rather than a wall of identical marks.
Note
One quirk to expect: the built-in language symbols are sized individually, so each one fits its
badge well. A glyph you set for a type inherits that type's fitting. The practical effect is that
the same icon renders noticeably larger on .ts than on .json — the marks were tuned per
language and your replacement rides on the same numbers. Use the per-type Size slider to even
them up.
The preview pane doesn't apply that per-language fitting at all, so preview glyph size is not a reliable guide — for a type whose symbol is a file-tree icon rather than a hand-drawn language mark, the preview draws it well over half again as large as it lands. Size glyphs against the graph after Apply, not against the preview.
Nothing here reaches the graph until you press Apply.