[Bug]: Icon line weight changes with icon size

Offen
  • Stimmt etwas nicht?
#36,077 1 Kommentar 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Maintainer antworten meist innerhalb von 1 Tag

@levelorbit arbeitet bereits daran.

Seit 13.11.2026.

  • #36078 von @levelorbit — offen

Bewertung

Schwierigkeit
3/5
Geschätzter Aufwand
1-2 Tage
Anfängerfreundlichkeit
22/100
Issue-Typ
Bug
Klarheit
Größtenteils klar
Aktivitätsstatus
Aktiv
Tech-Stack
css
Bereich
design, frontend

Rechercherichtung

The problem is a global stroke-width rule for lucide icons under apps/web, plus per-icon overrides (1.75, 1.9, 2, 2.25) in the timeline and toast surfaces. Linked PR 36078 is already open, so review that work before starting a parallel change. Done means icons of 12, 14 and 16 px draw the same line weight in light and dark themes, which needs visual checking by someone other than the author.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

bug needs-triage
Before submitting
  • I searched existing issues and did not find a duplicate.
  • I included enough detail to reproduce or investigate the problem.
Area

apps/web

Steps to reproduce
  1. Open the web or desktop app on main.
  2. Find icons of different sizes that sit together, like the sidebar header, a timeline row or a toast.
  3. Compare the line of a 12 px icon with a 16 px icon.
Expected behavior

Icons that sit together draw the same line weight, whatever their size.

Actual behavior

One global rule sets stroke-width: 1.75 on lucide's 24-unit grid, so the line scales with the icon:

Icon size Line drawn on main
12 px 0.88 px
14 px 1.02 px
16 px 1.17 px

Some icons also carry one-off overrides (1.75, 1.9, 2 and 2.25). That makes timeline and toast icons heavier than their neighbors. Hand-built SVGs next to lucide icons use their own weights too.

Top is main, bottom is the fix I have ready:

Sidebar and timeline, light, main above and the fix below

I'll link the PR here. Three things to know:

  • I tested and verified it by eye on most surfaces, and I made the design calls along the way (the weight, how large icons scale, which overrides go).
  • One person's eyes aren't enough for a visual change this wide. Someone else needs to see it for themselves.
  • It's one part of a larger set. Some places are unclear today because of color and icon choice. I'm leaving those out for scope, and because unvouched contributors can only have 3 open PRs.
Impact

Cosmetic issue

Version or commit

main @ 290182dc83

Environment

macOS 27.2. Chromium 156, Firefox 157 and WebKit 27.2.

Logs or stack traces
Screenshots, recordings, or supporting files

pair-toast-theme-light-2x.png
pair-app-light-1x.png
pair-app-light-2x.png
pair-app-dark-2x.png

Workaround

No response

Vorherrschende Sprache
TypeScript
Sterne
24.8k
Forks
6.4k
Ø Merge
59 Min.
Gemergte PRs (30 T.)
418

Entwicklungsumgebung

In Codespaces öffnen

Startet den Dev-Container des Projekts im Browser, mit Ihrem eigenen GitHub-Konto.

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus pingdotgg/t3code

Alle Issues in pingdotgg/t3code

Ähnliche Issues

Weitere Issues zu TypeScript

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.