[Bug]: Icon line weight changes with icon size

Aberta
  • Algo errado?
#36,077 1 comentário 0 reações 0 responsáveis Ver no GitHub

Mantenedores costumam responder em até 1 dia

@levelorbit já está trabalhando nisso.

Desde 13/11/2026.

  • #36078 de @levelorbit — aberto

Avaliação

Dificuldade
3/5
Tempo estimado
1-2 dias
Facilidade para iniciantes
22/100
Tipo de issue
Bug
Clareza
Razoavelmente clara
Status de atividade
Ativa
Stack de tecnologia
css
Domínio
design, frontend

Direção de pesquisa

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.

Escrita pelo modelo de indexação a partir do texto da issue.

Descrição

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

Linguagem predominante
TypeScript
Estrelas
24.8k
Forks
6.4k
Merge médio
59min
PRs com merge (30d)
418

Preparar o ambiente

Abrir no Codespaces

Inicia o contêiner de desenvolvimento do projeto no navegador, com a sua própria conta do GitHub.

Primeiros passos

  1. Leia a issue inteira e depois o guia de contribuição do projeto.
  2. Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
  3. Faça um fork do repositório e trabalhe em uma branch.
  4. Abra um pull request que referencie o número da issue.

Mais de pingdotgg/t3code

Todas as issues de pingdotgg/t3code

Issues semelhantes

Mais issues de TypeScript

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.