[Bug]: Icon line weight changes with icon size

Đang mở
  • Có gì không ổn?
#36,077 1 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

@levelorbit đang làm issue này rồi.

Từ ngày 13/11/2026.

  • #36078 của @levelorbit — đang mở

Đánh giá

Độ khó
3/5
Thời gian dự kiến
1-2 ngày
Mức phù hợp với người mới
22/100
Loại issue
Lỗi
Độ rõ ràng
Khá rõ ràng
Mức độ hoạt động
Sôi nổi
Công nghệ
css
Lĩnh vực
design, frontend

Hướng nghiên cứu

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.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

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

Ngôn ngữ chính
TypeScript
Star
24.8k
Fork
6.4k
Merge trung bình
59 phút
Pull request đã merge (30 ngày)
418

Chuẩn bị môi trường

Mở trong Codespaces

Khởi chạy dev container của dự án ngay trên trình duyệt, bằng tài khoản GitHub của bạn.

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của pingdotgg/t3code

Tất cả issue của pingdotgg/t3code

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.