docs(plans): icon font spec for web UIs (#818)#907
Conversation
Add headless spec-start artifacts for migrating UI chrome from inline SVG to icon fonts, with exceptions for bespoke/brand graphics. Refs fullsend-ai#818 Co-authored-by: Cursor <cursoragent@cursor.com>
|
fullsend review is working on this — view logs |
Site previewPreview: https://4663b8e7-site.fullsend-ai.workers.dev Commit: |
Review: #907Head SHA: 6d1f250 SummaryThis is a docs-only PR adding two new files ( FindingsInfo
FooterOutcome: approve |
![fullsend-ai-review[bot]](https://avatars.githubusercontent.com/u/271249281?s=60&v=4){kind=small}
|
|
||
| - **Kind:** open | ||
| - **Detail:** The issue asks for icon fonts but does not pick a vendor. Triage suggested Material Symbols, Font Awesome, Lucide, Heroicons, or other. Lucide/Heroicons are commonly shipped as SVG components; adapting them to a font may be non-standard compared to first-party variable fonts. | ||
| - **Suggested resolution:** Product owner picks one primary family (variable font preferred) and one fallback; record license + self-host decision in the implementation ADR or PR description. |
There was a problem hiding this comment.
Please suggest a few options, provide factors for comparison such as licensing constraints, file size, icon coverage and stylistic match, and select one of the options as the most recommended one.
| - **Kind:** assumption | ||
| - **Detail:** Graph visualization and other data-bound vector art should remain SVG (or canvas) rather than being forced into a font. | ||
| - **Confidence:** high | ||
| - **Blast radius if wrong:** Wasted effort trying to encode complex paths as fonts, or broken visuals if graph code is “simplified” incorrectly. |
There was a problem hiding this comment.
I confirm - this is only about icons.
|
|
||
| - **Kind:** scope | ||
| - **Detail:** Strict reading: all static chrome icons move to the font system. Pragmatic reading: brand marks that must follow third-party guidelines may remain inline SVG or `<img>` even when a font glyph exists. | ||
| - **Proposed handling:** Adopt the pragmatic boundary; list allowed SVG exceptions in developer docs to avoid drift. |
There was a problem hiding this comment.
I confirm using the pragmatic approach.
| - **Kind:** assumption | ||
| - **Detail:** This spec references triage’s list of SVG-heavy areas; the local checkout used for spec-start may have fewer Svelte files than upstream at times. Implementation should re-audit `web/**` for actual `<svg>` usage at merge time. | ||
| - **Confidence:** medium | ||
| - **Blast radius if wrong:** Missed migration targets or unnecessary font work on unused components. |
There was a problem hiding this comment.
This is not a real concern
|
Please include a list of currently existing UI elements where icons that are candidate for replacement exist, specify what the icon contains and which kind of glyph may replace it. |
1 participant
Summary
Headless spec-start artifacts for issue #818 (Change icons in web UIs to use an icon font rather than embed raw SVGs), following spec-start-github (issue-driven branch + PR).
Topic directory
docs/plans/2026-05-14-web-icon-fonts-for-ui/spec.md— design: goals, options (variable font vs classic webfont vs SVG sprite), recommended variable icon font + narrow SVG exceptions (graphs, some brand marks), components, testing, rollout.qna.md— assumptions and open questions (canonical font family, subsetting ownership, strictness of “no inline SVG”).Recommended approach (one paragraph)
Use a variable icon font (Material Symbols–class) for repeated UI chrome, delivered as self-hosted WOFF2 with a small Svelte
UiIconwrapper and CSS tied tofont-size/color; keep SVG (or similar) for bespoke graph geometry and any brand marks that must follow third-party guidelines. If licensing or ops block the variable-font path, fall back to a subset classic webfont (Font Awesome–class) without changing the overall direction.Top questions for reviewers
What to review
spec.mdfor architecture, non-goals, and rollout.qna.mdfor open items aligned with the issue’s needs-info state.Refs #818
Made with Cursor