Story — documentation
Getting the exact product icon into the docs, sharp
“My docs kept telling people to ‘click the export icon,’ and the icon I'd pasted next to that sentence was a fuzzy 18-pixel crop out of a screenshot. On a retina display it looked like a mistake. I wanted the real glyph — the exact one in the product — sitting inline in the page.”
The setup
Instructions are only as clear as the icon next to them
What wasn't working
“Cropping icons out of screenshots is a losing game. They're raster, so they blur the moment someone zooms or reads on a hi-DPI screen. They carry a background tint from wherever I cropped them. And they drift out of date — the product ships a new icon, my docs still show last quarter's. I could file a request with design for exports, but that's a queue, and I'm writing today.”
Right-click didn't help either: the glyphs were inline markup with no image URL behind them. Nothing to save.
The switch
Tomás opened the product, clicked SVG Downloader, and paged through the isolated previews to the exact toolbar glyph he needed. Each icon shows on its own, off the busy chrome, so there's no ambiguity about which one you're grabbing. A filename — export.svg — one click, done.
“Inline in MDX, the icon is sharp at every zoom, it inherits the docs' text colour through currentColor so it sits in a sentence like a word, and it's the actual product glyph — not my approximation of it. When the product's export icon changes, I re-grab it in ten seconds. The file came down with its xmlns repaired, so it just worked in the build.”
“The docs finally look like the product instead of a photocopy of it. And I stopped waiting on an export queue to write a sentence.”
— Tomás Herrera, technical writerThe result
- Sharpinline SVG stays crisp at any zoom and on any display
- 10 secto re-grab an icon when the product updates it
- currentColorglyphs inherit the docs' text colour, inline in a sentence
- What did the work
- Inline SVG detection plus the isolated preview to pick the exact glyph, saved under a named file. See the universal method.
- Why the icon looked black
- Many UI glyphs use
currentColorand save with no baked colour — which is exactly what you want inline in text. In docs it takes the paragraph's colour automatically. - A note on rights
- Documenting a product you're authorised to write about is fine; check licensing before reusing another company's icons outside that context.
Composite story — an illustrative but representative workflow. The person and product are fictional; the extension's behaviour described here is real. More stories →
Docs that match the product
Grab the exact glyph as inline SVG — sharp at any zoom, colour-aware, always current.