Skip to content

fix(icons): Changed a-large-small icon #3396

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 4 commits into
base: main
Choose a base branch
from

Conversation

vichotech
Copy link

@vichotech vichotech commented Jul 7, 2025

What is the purpose of this pull request?

  • Other: Icon update.

Description

  • a-large-small: Reduced the scale of the larger A to make it more consistent with the other icons where this symbol is used. Modified the shape of the smaller A to better convey the concept: a change from one size to another (instead of a change from one character to another). Moved the baseline of both characters 1px lower to visually center the icon more effectively.
    before
    changes
    after

  • case-sensitive: Moved the baseline of both characters 1px lower to visually center the icon more effectively.
    before
    changes
    after

  • case-lower: Moved the baseline of both characters 1px lower to visually center the icon more effectively.
    before
    changes
    after

  • case-upper: Moved the baseline of both characters 1px lower to visually center the icon more effectively.
    before
    changes
    after

Before Submitting

@github-actions github-actions bot added 🎨 icon About new icons 🫧 metadata Improved metadata labels Jul 7, 2025
Copy link

github-actions bot commented Jul 7, 2025

Added or changed icons

icons/a-large-small.svgicons/case-lower.svgicons/case-sensitive.svgicons/case-upper.svg

Preview cohesion icons/square-kanban.svgicons/square-dashed.svgicons/square-activity.svgicons/message-square-reply.svg
icons/a-large-small.svgicons/case-lower.svgicons/case-sensitive.svgicons/case-upper.svg
icons/clipboard-pen-line.svgicons/list-start.svgicons/radio.svgicons/image-minus.svg
Preview stroke widths icons/a-large-small.svgicons/case-lower.svgicons/case-sensitive.svgicons/case-upper.svg
icons/a-large-small.svgicons/case-lower.svgicons/case-sensitive.svgicons/case-upper.svg
icons/a-large-small.svgicons/case-lower.svgicons/case-sensitive.svgicons/case-upper.svg
DPI Preview

16px (shadcn/ui)

icons/a-large-small.svg icons/case-lower.svg icons/case-sensitive.svg icons/case-upper.svg

24px (default)

icons/a-large-small.svg icons/case-lower.svg icons/case-sensitive.svg icons/case-upper.svg

32px (shadcn/ui + retina)

icons/a-large-small.svg icons/case-lower.svg icons/case-sensitive.svg icons/case-upper.svg

48px (default + retina)

icons/a-large-small.svg icons/case-lower.svg icons/case-sensitive.svg icons/case-upper.svg
Icon X-rays icons/a-large-small.svg icons/case-lower.svg icons/case-sensitive.svg icons/case-upper.svg
Icon Diffs icons/a-large-small.svg icons/case-lower.svg icons/case-sensitive.svg icons/case-upper.svg
Icons as code

Works for: lucide-react, lucide-react-native, lucide-preact, lucide-vue-next

const ALargeSmallIcon = createLucideIcon('ALargeSmall', [
  ["path",{"d":"m15 16 3-6 3 6"}],
  ["path",{"d":"M15.5 15h5"}],
  ["path",{"d":"m3 16 4-8 4 8"}],
  ["path",{"d":"M4 14h6"}]
])

const CaseLowerIcon = createLucideIcon('CaseLower', [
  ["path",{"d":"M10 10v6"}],
  ["path",{"d":"M14 8v8"}],
  ["circle",{"cx":"17","cy":"13","r":"3"}],
  ["circle",{"cx":"7","cy":"13","r":"3"}]
])

const CaseSensitiveIcon = createLucideIcon('CaseSensitive', [
  ["path",{"d":"M21 10v6"}],
  ["path",{"d":"m3 16 4-8 4 8"}],
  ["path",{"d":"M4 14h6"}],
  ["circle",{"cx":"18","cy":"13","r":"3"}]
])

const CaseUpperIcon = createLucideIcon('CaseUpper', [
  ["path",{"d":"M15 12h4.5a2 2 0 0 1 0 4H15V8h4a2 2 0 0 1 0 4"}],
  ["path",{"d":"m3 16 4-8 4 8"}],
  ["path",{"d":"M4 14h6"}]
])

@jguddas
Copy link
Member

jguddas commented Jul 7, 2025

Moving it down 1px looks nice, reducing the size is a bad idea, it breaks the 2px gap rule and the rule for visual size.
We should also consider fixing the rounding issues that are not followed by all those icons (even in main), only https://lucide.dev/icons/letter-text has rounding currently.

@karsa-mistmere
Copy link
Member

karsa-mistmere commented Jul 7, 2025

Hi @vichotech,

Thanks for the update — I appreciate the intention behind these changes.

For a-large-small: I agree the current smaller capital A is visually awkward. That being said, the proposed replacement unfortunately isn’t compliant with our icon guidelines — particularly due to the gap size, which is too tight and creates visual imbalance.

Regarding the baseline adjustments in case-lower: I see the effort to better center this vertically. However, in practice the new version seems to shift the visual weight lower, making it feel even less centered than before — just in the opposite direction.

@karsa-mistmere
Copy link
Member

karsa-mistmere commented Jul 7, 2025

Here's one idea to increase the size, have better centre of gravity and get rid of the awkward A, but I'm not 100% sold on this direction yet.

image

icons
Open lucide studio

icons
Open lucide studio

icons
Open lucide studio

icons
Open lucide studio


Edit, alternatively:

image

icons
Open lucide studio

But this doesn't feel much better.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🎨 icon About new icons 🫧 metadata Improved metadata
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants