Skip to content

Work / Trunk / Wiki / Surfaces

icons-use

Surfacecanonicalverified 2026-10-19

SURFACE.WEB.STYLES-ICONS.ICONS-USE

Summary

Clicking an icon, a logo or an image opens it to use in code: copy it, or download the file.

Raw wireframe

  • .context/designs/web/styles-icons/icons-use.html

Why it is drawn this way

One click from the board to the code. Before this, taking an icon meant opening it and finding SVG in the inspector. The dialog shows each form the item is used in, with its own Copy: an SVG icon gives the SVG (sized 1em, in currentColor) and a React component; a logo or an image gives HTML, CSS and Markdown. Download gives the file itself.

It is in the address (?use=1 on the item's own address), so the item is selected behind it, Escape or × closes it, and it can be linked to.

Images open the same dialog; it is drawn once, here.

Related

Sources

  • .context/designs/web/styles-icons/icons-use.html