Skip to content

Conversation

vichotech
Copy link
Contributor

@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
Contributor

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/message-square-code.svgicons/message-square-x.svgicons/square-arrow-up.svgicons/square-arrow-down.svg
icons/a-large-small.svgicons/case-lower.svgicons/case-sensitive.svgicons/case-upper.svg
icons/bookmark.svgicons/decimals-arrow-left.svgicons/chart-no-axes-gantt.svgicons/feather.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 2.536-7.328a1.02 1.02 1 0 1 1.928 0L22 16"}],
  ["path",{"d":"M15.697 14h5.606"}],
  ["path",{"d":"m2 16 4.039-9.69a.5.5 0 0 1 .923 0L11 16"}],
  ["path",{"d":"M3.304 13h6.392"}]
])

const CaseLowerIcon = createLucideIcon('CaseLower', [
  ["path",{"d":"M10 9v7"}],
  ["path",{"d":"M14 6v10"}],
  ["circle",{"cx":"17.5","cy":"12.5","r":"3.5"}],
  ["circle",{"cx":"6.5","cy":"12.5","r":"3.5"}]
])

const CaseSensitiveIcon = createLucideIcon('CaseSensitive', [
  ["path",{"d":"m2 16 4.039-9.69a.5.5 0 0 1 .923 0L11 16"}],
  ["path",{"d":"M22 9v7"}],
  ["path",{"d":"M3.304 13h6.392"}],
  ["circle",{"cx":"18.5","cy":"12.5","r":"3.5"}]
])

const CaseUpperIcon = createLucideIcon('CaseUpper', [
  ["path",{"d":"M15 11h4.5a1 1 0 0 1 0 5h-4a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h3a1 1 0 0 1 0 5"}],
  ["path",{"d":"m2 16 4.039-9.69a.5.5 0 0 1 .923 0L11 16"}],
  ["path",{"d":"M3.304 13h6.392"}]
])

@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.

@jguddas jguddas requested a review from karsa-mistmere July 20, 2025 12:57
Copy link
Member

@ericfennis ericfennis left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice improvement!

@ericfennis ericfennis requested a review from jguddas July 26, 2025 18:05
@karsa-mistmere karsa-mistmere merged commit 405feea into lucide-icons:main Jul 28, 2025
7 checks passed
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.

4 participants