Icon composition

Every DTPR icon is a 36×36 SVG composed on demand from three independent inputs:

shape (from category) + symbol (from element) + variant (default | dark | context color) → SVG

This composition is deterministic. The same (version, element_id, variant) triple always returns a byte-identical SVG, and the response carries a long Cache-Control header and an X-DTPR-Content-Hash for cache invalidation.

In this section

• Shapes — the primitive shape family and how a category picks one.
• Symbols — release-pinned symbol SVGs and the symbol_id link.
• Composed variants — default, dark, and { kind: 'colored', color }; the inner-color luminance rule.
• URLs — how to derive and discover icon URLs.

Related

• REST: icon routes — the HTTP surface.
• MCP: get_icon_url — the MCP tool that resolves these URLs.
• @dtpr/ui DtprIcon — the Vue component that renders composed icons.