[Bug]: Icon line weight changes with icon size

Abierto
  • ¿Algo no está bien?
#36,077 1 comentario 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

@levelorbit ya está trabajando en esto.

Desde el 13/11/2026.

  • #36078 de @levelorbit — abierto

Evaluación

Dificultad
3/5
Tiempo estimado
1-2 días
Aptitud para principiantes
22/100
Tipo de issue
Error
Claridad
Bastante claro
Estado de actividad
Activo
Stack tecnológico
css
Área
design, frontend

Línea de trabajo

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.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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

Lenguaje dominante
TypeScript
Estrellas
24.8k
Forks
6.4k
Merge medio
59 min
PR fusionados (30 d)
418

Preparar el entorno

Abrir en Codespaces

Inicia el contenedor de desarrollo del proyecto en tu navegador, con tu propia cuenta de GitHub.

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de pingdotgg/t3code

Todos los issues de pingdotgg/t3code

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.