Skip to content
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

fix(icons): updated *-cog icons #2782

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

Conversation

UsamaKhan
Copy link

What is the purpose of this pull request?

  • Other: Icon update

Description

I found that a lot of the icons that have "mini" cogs were not pixel perfect, specifically inside the cog:

Screenshot 2025-02-09 at 7 04 36 PM

I created a new cog that fixes this:

icons
Open lucide studio

I fixed the cog and also did some minor adjustments to a few icons like straightening the bottom corner of the file-cog icon to align with the other file icons.

Before Submitting

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

Added or changed icons

icons/brain-cog.svgicons/calendar-cog.svgicons/cloud-cog.svgicons/file-cog.svgicons/folder-cog.svgicons/monitor-cog.svgicons/server-cog.svgicons/user-cog.svgicons/user-round-cog.svg

Preview cohesion icons/square-pilcrow.svgicons/message-square-x.svgicons/message-square-off.svgicons/square-library.svgicons/square-pen.svgicons/square-code.svgicons/square-arrow-up.svgicons/message-square-heart.svgicons/square-split-horizontal.svg
icons/brain-cog.svgicons/calendar-cog.svgicons/cloud-cog.svgicons/file-cog.svgicons/folder-cog.svgicons/monitor-cog.svgicons/server-cog.svgicons/user-cog.svgicons/user-round-cog.svg
icons/disc-3.svgicons/save.svgicons/lasso-select.svgicons/history.svgicons/book-down.svgicons/git-compare.svgicons/case-upper.svgicons/wind-arrow-down.svgicons/table-of-contents.svg
Preview stroke widths icons/brain-cog.svgicons/calendar-cog.svgicons/cloud-cog.svgicons/file-cog.svgicons/folder-cog.svgicons/monitor-cog.svgicons/server-cog.svgicons/user-cog.svgicons/user-round-cog.svg
icons/brain-cog.svgicons/calendar-cog.svgicons/cloud-cog.svgicons/file-cog.svgicons/folder-cog.svgicons/monitor-cog.svgicons/server-cog.svgicons/user-cog.svgicons/user-round-cog.svg
icons/brain-cog.svgicons/calendar-cog.svgicons/cloud-cog.svgicons/file-cog.svgicons/folder-cog.svgicons/monitor-cog.svgicons/server-cog.svgicons/user-cog.svgicons/user-round-cog.svg
DPI Preview (24px) icons/brain-cog.svg icons/calendar-cog.svg icons/cloud-cog.svg icons/file-cog.svg icons/folder-cog.svg icons/monitor-cog.svg icons/server-cog.svg icons/user-cog.svg icons/user-round-cog.svg
Icon X-rays icons/brain-cog.svg icons/calendar-cog.svg icons/cloud-cog.svg icons/file-cog.svg icons/folder-cog.svg icons/monitor-cog.svg icons/server-cog.svg icons/user-cog.svg icons/user-round-cog.svg
Icon Diffs icons/brain-cog.svg icons/calendar-cog.svg icons/cloud-cog.svg icons/file-cog.svg icons/folder-cog.svg icons/monitor-cog.svg icons/server-cog.svg icons/user-cog.svg icons/user-round-cog.svg
Icons as code

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

const BrainCogIcon = createLucideIcon('BrainCog', [
  ["path",{"d":"m10.852 14.772-.383.923"}],
  ["path",{"d":"m10.852 9.228-.383-.923"}],
  ["path",{"d":"m13.148 14.772.382.924"}],
  ["path",{"d":"m13.531 8.305-.383.923"}],
  ["path",{"d":"m14.772 10.852.923-.383"}],
  ["path",{"d":"m14.772 13.148.923.383"}],
  ["path",{"d":"M17.598 6.5A3 3 0 1 0 12 5a3 3 0 0 0-5.63-1.446 3 3 0 0 0-.368 1.571 4 4 0 0 0-2.525 5.771"}],
  ["path",{"d":"M17.998 5.125a4 4 0 0 1 2.525 5.771"}],
  ["path",{"d":"M19.505 10.294a4 4 0 0 1-1.5 7.706"}],
  ["path",{"d":"M4.032 17.483A4 4 0 0 0 11.464 20c.18-.311.892-.311 1.072 0a4 4 0 0 0 7.432-2.516"}],
  ["path",{"d":"M4.5 10.291A4 4 0 0 0 6 18"}],
  ["path",{"d":"M6.002 5.125a3 3 0 0 0 .4 1.375"}],
  ["path",{"d":"m9.228 10.852-.923-.383"}],
  ["path",{"d":"m9.228 13.148-.923.383"}],
  ["circle",{"cx":"12","cy":"12","r":"3"}]
])

const CalendarCogIcon = createLucideIcon('CalendarCog', [
  ["path",{"d":"m15.228 16.852-.923-.383"}],
  ["path",{"d":"m15.228 19.148-.923.383"}],
  ["path",{"d":"M16 2v4"}],
  ["path",{"d":"m16.47 14.305.382.923"}],
  ["path",{"d":"m16.852 20.772-.383.924"}],
  ["path",{"d":"m19.148 15.228.383-.923"}],
  ["path",{"d":"m19.53 21.696-.382-.924"}],
  ["path",{"d":"m20.772 16.852.924-.383"}],
  ["path",{"d":"m20.772 19.148.924.383"}],
  ["path",{"d":"M21 11V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h6"}],
  ["path",{"d":"M3 10h18"}],
  ["path",{"d":"M8 2v4"}],
  ["circle",{"cx":"18","cy":"18","r":"3"}]
])

const CloudCogIcon = createLucideIcon('CloudCog', [
  ["path",{"d":"m10.852 19.772-.383.924"}],
  ["path",{"d":"m13.148 14.228.383-.923"}],
  ["path",{"d":"M13.148 19.772a3 3 0 1 0-2.296-5.544l-.383-.923"}],
  ["path",{"d":"m13.53 20.696-.382-.924a3 3 0 1 1-2.296-5.544"}],
  ["path",{"d":"m14.772 15.852.923-.383"}],
  ["path",{"d":"m14.772 18.148.923.383"}],
  ["path",{"d":"M4.2 15.1a7 7 0 1 1 9.93-9.858A7 7 0 0 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.2"}],
  ["path",{"d":"m9.228 15.852-.923-.383"}],
  ["path",{"d":"m9.228 18.148-.923.383"}]
])

const FileCogIcon = createLucideIcon('FileCog', [
  ["path",{"d":"M14 2v4a2 2 0 0 0 2 2h4"}],
  ["path",{"d":"m2.305 15.53.923-.382"}],
  ["path",{"d":"m3.228 12.852-.924-.383"}],
  ["path",{"d":"M4 22h14a2 2 0 0 0 2-2V7l-5-5H6a2 2 0 0 0-2 2v2.5"}],
  ["path",{"d":"m4.852 11.228-.383-.923"}],
  ["path",{"d":"m4.852 16.772-.383.924"}],
  ["path",{"d":"m7.148 11.228.383-.923"}],
  ["path",{"d":"m7.53 17.696-.382-.924"}],
  ["path",{"d":"m8.772 12.852.923-.383"}],
  ["path",{"d":"m8.772 15.148.923.383"}],
  ["circle",{"cx":"6","cy":"14","r":"3"}]
])

const FolderCogIcon = createLucideIcon('FolderCog', [
  ["path",{"d":"M10.3 20H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.98a2 2 0 0 1 1.69.9l.66 1.2A2 2 0 0 0 12 6h8a2 2 0 0 1 2 2v3.3"}],
  ["path",{"d":"m14.305 19.53.923-.382"}],
  ["path",{"d":"m15.228 16.852-.923-.383"}],
  ["path",{"d":"m16.852 15.228-.383-.923"}],
  ["path",{"d":"m16.852 20.772-.383.924"}],
  ["path",{"d":"m19.148 15.228.383-.923"}],
  ["path",{"d":"m19.53 21.696-.382-.924"}],
  ["path",{"d":"m20.772 16.852.924-.383"}],
  ["path",{"d":"m20.772 19.148.924.383"}],
  ["circle",{"cx":"18","cy":"18","r":"3"}]
])

const MonitorCogIcon = createLucideIcon('MonitorCog', [
  ["path",{"d":"M12 17v4"}],
  ["path",{"d":"m14.305 7.53.923-.382"}],
  ["path",{"d":"m15.228 4.852-.923-.383"}],
  ["path",{"d":"m16.852 3.228-.383-.924"}],
  ["path",{"d":"m16.852 8.772-.383.923"}],
  ["path",{"d":"m19.148 3.228.383-.924"}],
  ["path",{"d":"m19.53 9.696-.382-.924"}],
  ["path",{"d":"m20.772 4.852.924-.383"}],
  ["path",{"d":"m20.772 7.148.924.383"}],
  ["path",{"d":"M22 13v2a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7"}],
  ["path",{"d":"M8 21h8"}],
  ["circle",{"cx":"18","cy":"6","r":"3"}]
])

const ServerCogIcon = createLucideIcon('ServerCog', [
  ["path",{"d":"m10.852 14.772-.383.923"}],
  ["path",{"d":"M13.148 14.772a3 3 0 1 0-2.296-5.544l-.383-.923"}],
  ["path",{"d":"m13.148 9.228.383-.923"}],
  ["path",{"d":"m13.53 15.696-.382-.924a3 3 0 1 1-2.296-5.544"}],
  ["path",{"d":"m14.772 10.852.923-.383"}],
  ["path",{"d":"m14.772 13.148.923.383"}],
  ["path",{"d":"M4.5 10H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-.5"}],
  ["path",{"d":"M4.5 14H4a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-4a2 2 0 0 0-2-2h-.5"}],
  ["path",{"d":"M6 18h.01"}],
  ["path",{"d":"M6 6h.01"}],
  ["path",{"d":"m9.228 10.852-.923-.383"}],
  ["path",{"d":"m9.228 13.148-.923.383"}]
])

const UserCogIcon = createLucideIcon('UserCog', [
  ["path",{"d":"M10 15H6a4 4 0 0 0-4 4v2"}],
  ["path",{"d":"m14.305 16.53.923-.382"}],
  ["path",{"d":"m15.228 13.852-.923-.383"}],
  ["path",{"d":"m1...*[Comment body truncated]*

@jguddas
Copy link
Member

jguddas commented Mar 1, 2025

image I don't like this change.

@UsamaKhan
Copy link
Author

image I don't like this change.

@jguddas I did that to align with the other file icons:

image

Now that I look at them all, it does seem that some have a curved corner while others don't. Maybe we should have a guidance on sub icon placements and if the corners should be curved or not to keep things concise?

I can change it back to a curved corner if that is what we want.

@jguddas
Copy link
Member

jguddas commented Mar 1, 2025

Yeah the other file icons should change to have the rounding.

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.

2 participants