Icon Requests Tracker Issue

Question

Icon Requests Tracker Issue

kvndrsslr opened this issue 3 years ago · comments

Kevin Dreßler commented 3 years ago

Current Icon Tracker

Icon Contribution Guideline

(Originally posted by @Jean-Tinland in #164 (comment))

For each icon I'm following these steps:

I'm getting the original icon or, if not in a vector format I'm redrawing it in Figma. No need to be extremely precise as it is displayed in a really small size)
I'm setting the new icon in a 24x24 viewbox
Then I'm optimising it using SVGOMG
Finally I'm adding it to the icons.jsx file in order to make the association in app-icons.js

Dom Miketa · Answer 1 · Tue Aug 17 2021 00:09:52 GMT+0800 (China Standard Time)

Preview? :)

Kevin Dreßler · Answer 2 · Tue Aug 17 2021 16:53:10 GMT+0800 (China Standard Time)

Feel free to add my fork as a git-remote and checkout my main branch for preview!

Dom Miketa · Answer 3 · Wed Aug 18 2021 18:45:02 GMT+0800 (China Standard Time)

Signal and Preview (standard PDF icon) in #194

Kevin Dreßler · Answer 4 · Wed Aug 18 2021 19:54:52 GMT+0800 (China Standard Time)

Oh, you meant the app Preview! Thought you wanted to preview the new icons.😅

MiuKaShi · Answer 5 · Wed Aug 18 2021 19:56:26 GMT+0800 (China Standard Time)

how about these applications

Kevin Dreßler · Answer 6 · Wed Aug 18 2021 20:05:31 GMT+0800 (China Standard Time)

I'll add them to the list. Pretty busy with work atm, so my progress is bound to be slow. Feel free to contribute, I will insert the workflow as described by @Jean-Tinland in the first post. I found the workflow is easy to follow and once I figured out how to use figma I got pretty fast at it.

Dom Miketa · Answer 7 · Thu Aug 19 2021 02:01:29 GMT+0800 (China Standard Time)

Signal/Zotero/Preview in #195

Sean · Answer 8 · Mon Aug 23 2021 15:35:47 GMT+0800 (China Standard Time)

hey, great work on the recent updates, really looking forward to custom widgets :D

Can we get the vscode icon linked to vscode insiders as well?

I'd assume VSCodium would be a similar situation too, not sure if that's handled, just thought i'd mention it.

Vaughan · Answer 9 · Thu Aug 26 2021 20:46:15 GMT+0800 (China Standard Time)

Just wondering if we could add a few more icons such as:
Vivaldi
Atom
Folx
Xcode

Jean Tinland · Answer 10 · Mon Sep 06 2021 18:15:13 GMT+0800 (China Standard Time)

I added these 4 to the list!

Max Shirokawa · Answer 11 · Sun Nov 28 2021 09:18:14 GMT+0800 (China Standard Time)

I am wondering if there's any way to adjust the size of the icons in the bar?

bbamnesia · Answer 12 · Fri Feb 11 2022 11:44:03 GMT+0800 (China Standard Time)

Can we please get system preferences in here too please

Jean Tinland · Answer 13 · Sun Feb 13 2022 02:14:10 GMT+0800 (China Standard Time)

I added a gear icon for System preferences app in my latest commit!

bbamnesia · Answer 14 · Mon Feb 21 2022 13:20:03 GMT+0800 (China Standard Time)

Thank you! Can we please get the News icon as well please

ArnstadFredrik · Answer 15 · Mon Mar 14 2022 21:04:31 GMT+0800 (China Standard Time)

would it be possible to assign icons to certain apps?. for example a calendar icon for a different, or non-standard calendar app. Or Apple preview which for me (on a Norwegian system) gets the default icon.

Lucas Kerbs · Answer 16 · Fri Mar 25 2022 02:29:00 GMT+0800 (China Standard Time)

I'd love an Omnifocus icon!

Tnixc · Answer 17 · Mon Apr 11 2022 15:00:49 GMT+0800 (China Standard Time)

I've made and added some of the mentioned icons on the current icon tracker and it works for me. Also, sublime text has already been implemented.

diocletiann · Answer 18 · Mon May 16 2022 03:50:07 GMT+0800 (China Standard Time)

Awesome work, love this bar. An email icon for https://mimestream.com/ would be nice, thanks!

occludedpixel · Answer 19 · Wed Aug 24 2022 15:42:12 GMT+0800 (China Standard Time)

I am wondering if there's any way to adjust the size of the icons in the bar?

@m-k-S I managed to do it by making adjustments to the css for the space__icon class in lib/styles/components/spaces/space.js.

.space__icon {
  flex: 0 0 16px;
  width: 16px;
  height: 11px;
  margin-left: 6px;
  fill: currentColor;
  opacity: 0.5;
  transform: matrix(1.5, 0, 0, 1.5, 0, 0);
}

After scaling the icons using a transformation matrix, I tweaked width and flex to correct the horizontal spacing.

ali · Answer 20 · Tue Sep 13 2022 00:09:42 GMT+0800 (China Standard Time)

Could you please add icons for:

I took a stab at creating them but don't know if they are up to your standards. Would you prefer that I open a pull request?

export const GoodNotes = (props) => (
  <Icon {...props}>
    <path d="M6.375 5.625h8.25a.375.375 0 000-.75h-8.25a.375.375 0 000 .75zm0 0M6.375 7.875h8.25a.375.375 0 000-.75h-8.25a.375.375 0 000 .75zm0 0M6.375 10.125h8.25a.375.375 0 000-.75h-8.25a.375.375 0 000 .75zm0 0M6.375 12.375h8.25a.375.375 0 000-.75h-8.25a.375.375 0 000 .75zm0 0M6.375 14.625h3a.375.375 0 000-.75h-3a.375.375 0 000 .75zm0 0"/>
    <path d="M21.195 9.61a1.131 1.131 0 00-1.543.402l-.902 1.543V2.25a.375.375 0 00-.375-.375h-2.844S14.402.727 14.36.765A.353.353 0 0014.25.75H3.375A.375.375 0 003 1.125v1.172a1.5 1.5 0 000 2.906v.844a1.5 1.5 0 000 2.906v.844a1.5 1.5 0 000 2.906v.469a1.5 1.5 0 000 2.906v2.297c0 .207.168.375.375.375h.375v1.125c0 .207.168.375.375.375h9.531l-.258.438a.365.365 0 00-.046.128v.004l-.004.008-.297 1.992c-.024.153.047.301.18.38a.372.372 0 00.417-.028l1.598-1.238c.102-.082.152-.13.145-.196l.87-1.488h2.114a.375.375 0 00.375-.375v-3.871l2.844-4.856a1.123 1.123 0 00-.399-1.539zm-.664.609c.145-.04.301.015.395.136a.38.38 0 01.023.415l-.191.324-.645-.38.188-.323a.367.367 0 01.23-.172zm-5.648 10.906l-.649-.379 4.93-8.414.648.379zm-.258-19.094l1.344 1.344h-1.344zm4.918 9.653l.191-.32.645.378-.188.32zM18 2.625V12.75c0 .023.004.047.008.074l-.758 1.29V3.75a.379.379 0 00-.11-.266l-.859-.859zM3.75 1.5h10.125v2.25c0 .207.168.375.375.375h2.25v11.27L14.973 18H3.75v-1.922c.527-.137.941-.55 1.078-1.078a.375.375 0 00-.727-.188.736.736 0 01-.351.461v-2.57c.527-.137.941-.55 1.078-1.078a.375.375 0 00-.727-.188.736.736 0 01-.351.461V8.953c.527-.137.941-.55 1.078-1.078a.375.375 0 00-.727-.188.736.736 0 01-.351.461V5.203c.527-.137.941-.55 1.078-1.078a.375.375 0 00-.727-.188.736.736 0 01-.351.461zM2.625 3.75c0-.27.145-.516.375-.648v1.296a.748.748 0 01-.375-.648zm0 3.75c0-.27.145-.516.375-.648v1.296a.748.748 0 01-.375-.648zm0 3.75c0-.27.145-.516.375-.648v1.296a.748.748 0 01-.375-.648zm0 3.375c0-.27.145-.516.375-.648v1.296a.748.748 0 01-.375-.648zM4.5 19.5v-.75h10.035l-.441.75zm9.508 1.98l.34.2-.418.324zM18 19.5h-1.297L18 17.285zm0 0"/>
  </Icon>
)

export const Quip = (props) => (
  <Icon {...props}>
    <path d="M21 21.75h-9A9.748 9.748 0 012.25 12 9.748 9.748 0 0112 2.25 9.748 9.748 0 0121.75 12v9a.75.75 0 01-.75.75zm-9-18A8.252 8.252 0 003.75 12 8.252 8.252 0 0012 20.25h8.25V12A8.252 8.252 0 0012 3.75zm0 0"/>
    <path d="M15.375 9.375h-6.75a.75.75 0 010-1.5h6.75a.75.75 0 010 1.5zm0 0M15.375 16.125h-6.75a.75.75 0 010-1.5h6.75a.75.75 0 010 1.5zm0 0M17.625 12.75H6.375a.75.75 0 010-1.5h11.25a.75.75 0 010 1.5zm0 0"/>
  </Icon>
)

export const Screens4 = (props) => (
  <Icon {...props}>
    <path
      fillRule="evenodd"
      d="M8.094 1.316a1.685 1.685 0 00-1.395 1.239l-.074.28-.348.032c-1.086.102-2.074.946-2.226 1.899l-.031.199-.262.031c-1.7.2-2.957 1.27-3.266 2.777-.258 1.27-.238 11.829.024 12.938.304 1.281 1.394 2.348 2.671 2.613 1.137.235 16.489.235 17.625 0 1.293-.27 2.434-1.406 2.696-2.691.242-1.184.242-11.676 0-12.86-.309-1.507-1.567-2.578-3.266-2.777l-.262-.031-.03-.2c-.153-.952-1.141-1.796-2.227-1.898l-.348-.031-.074-.281c-.192-.684-.711-1.137-1.438-1.243-.394-.054-7.375-.054-7.77.004M16 1.594c.54.203.91.703.957 1.281l.023.3.383.024c1.23.078 2.137 1.047 2.137 2.285v.223l.309.031c1.27.13 2.32 1.024 2.675 2.278.13.457.133 11.07.004 11.625-.074.324-.37 1.03-.433 1.03-.016 0-.004-.038.023-.089.067-.129.067-.133-.129-.125-.11 0-.207.04-.258.098-.046.05-.023-.012.055-.14.074-.13.188-.372.246-.54l.11-.305.011-5.386c.016-6.067.024-5.891-.312-6.567-.352-.715-1.04-1.215-1.863-1.36-.551-.1-15.329-.097-15.883 0-1.106.196-1.922 1.024-2.114 2.145-.058.328-.066 1.246-.054 5.782l.011 5.386.11.305c.058.168.172.41.25.54.137.226.137.23.02.105-.145-.149-.13-.145-.282-.075-.094.043-.11.07-.07.14.023.048.035.087.02.087-.063 0-.356-.695-.434-1.027-.13-.56-.13-11.165.004-11.63.355-1.253 1.406-2.148 2.675-2.277l.309-.031v-.223c0-1.238.906-2.207 2.137-2.285l.383-.023.023-.301a1.503 1.503 0 01.941-1.277c.383-.149 7.625-.149 8.016-.004m-7.734.14c-.567.118-.97.586-1.036 1.2l-.023.253h.75l.027-.195c.075-.57-.074-.55 4.016-.55s3.941-.02 4.016.55l.027.196h.75l-.023-.254c-.055-.504-.344-.922-.782-1.125-.23-.106-7.23-.172-7.722-.075m-1.844 1.79c-.934.148-1.64 1.019-1.64 2.015v.18h1.16l.019-.305c.031-.469.242-.695.719-.773.379-.063 10.261-.063 10.64 0 .477.078.688.304.72.773l.019.305h1.16v-.18c0-1.02-.707-1.867-1.688-2.023-.383-.059-10.738-.055-11.11.007m13.571 4.329c.215.109.313.195.422.37l.14.231.005 2.512c0 1.383-.004 2.39-.016 2.242l-.016-.27-.23.02c-.125.012-.235.004-.242-.012-.008-.02-.137-.023-.285-.015l-.27.015v.375c0 1.11-.637 2-1.629 2.274-.492.133-11.25.133-11.742 0-.973-.27-1.629-1.172-1.629-2.239 0-.418.023-.402-.574-.394-.2.004-.364-.012-.364-.031 0-.207-.093.039-.105.277-.008.176-.02-.805-.027-2.176l-.008-2.488.133-.25c.148-.29.422-.488.761-.555.114-.023 3.57-.039 7.805-.035l7.598.008.273.14M2.602 20.86c.101.102.171.188.16.188-.012 0-.106-.086-.207-.188-.102-.101-.172-.187-.16-.187.011 0 .105.086.207.187m19.007-.172c0 .008-.09.094-.199.2l-.2.183.185-.199c.175-.183.214-.223.214-.183" />
  </Icon>
)

export const SketchUp = (props) => (
  <Icon {...props}>
  <path
    fillRule="evenodd"
    d="M21.29 19.465 6.144 23.762 3.14 14.418 1.098 2.176 15.488.238l7.414 5.696Zm-14.927-1.61 4.617-1.183-1.18-2.254-4.296.965Zm-1.398-6.554 4.512-.965 1.183 2.144 5.047-1.07-3.117-3.867-8.485 1.504Zm10.203-9.664L2.602 3.247 3.46 5.18l9.02-1.29 3.332 3.329 5.261-.86Zm0 0" />
  </Icon>
)

Thank you for all of your work!

Calvin Newcomb · Answer 21 · Fri Sep 30 2022 03:55:21 GMT+0800 (China Standard Time)

Drew a Remnote icon

export const Remnote = (props) => (
  <Icon {...props}>
    <path d="M8.5 15h7l2.95 4.213a.5.5 0 0 1-.41.787H5.96a.5.5 0 0 1-.41-.787L8.5 15Z" />
    <path d="M.5 15a.5.5 0 0 1-.5-.5v-4a.5.5 0 0 1 .5-.5H12l-3.6 5H.5Z" />
    <path d="M2.146 5.986a.525.525 0 0 1 0-.722l2.896-3.016a.476.476 0 0 1 .704.012L10 7l2 3H6L2.146 5.986Z" />
    <path d="M23.5 15a.5.5 0 0 0 .5-.5v-4a.5.5 0 0 0-.5-.5H12l3.6 5h7.9Z" />
    <path d="M21.854 5.986a.525.525 0 0 0 0-.722l-2.896-3.016a.476.476 0 0 0-.704.012L14 7l-2 3h6l3.854-4.014Z" />
    <path d="M10 .5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5V10h-4V.5Z" />
  </Icon>

Not sure if anyone else uses the app for this, but I figured I'd post it here just in case.

Jean Tinland · Answer 22 · Mon Oct 10 2022 14:28:39 GMT+0800 (China Standard Time)

Thank you both @mrala & @cjnewco for these icons, I added them in the codebase and linked them to these apps. Let me know if I got some app names wrong and some icons are not showing.

I updated the TODO list and I will add the latest 2 requested icons soon!

Piotr Gajos · Answer 23 · Wed Nov 02 2022 10:20:14 GMT+0800 (China Standard Time)

Pushed a few more icons your way:

Plexamp
Adobe Photoshop
Adobe Illustrator
Adobe After Effects
Creative Cloud
Bitwig Studio

ali · Answer 24 · Wed Aug 09 2023 07:21:39 GMT+0800 (China Standard Time)

Would you mind adding an icon for Pins?

export const Pins = (props) => (
  <Icon {...props}>
    <path d="M11 17h2v5l-2 2v-7zm3.571-12c0-2.903 2.36-3.089 2.429-5h-10c.068 1.911 2.429 2.097 2.429 5 0 3.771-3.429 3.291-3.429 10h12c0-6.709-3.429-6.229-3.429-10z"/>
  </Icon>
);

Boris Li · Answer 25 · Sat Aug 12 2023 09:49:32 GMT+0800 (China Standard Time)

Can I get an icon for the Arc Browser?
https://arc.net
Thank you very much @kvndrsslr

Calvin Newcomb · Answer 26 · Sat Aug 12 2023 11:09:52 GMT+0800 (China Standard Time)

@litszwaiboris Heres the one that I made

export const Arc = (props) => (
   <Icon {...props}>
    <path fill-opacity=".7" fill-rule="evenodd" d="M23.466 6.208a2.537 2.537 0 0 1 1.326 3.333c-1.744 4.048-3.938 6.784-6.485 8.372-2.586 1.614-5.29 1.889-7.705 1.451-2.364-.428-4.444-1.53-6.001-2       .69-1.476-1.1-2.817-2.502-3.387-3.802a2.536 2.536 0 0 1 4.645-2.04s.026.053.101.16c.083.118.202.268.362.444a9.28 9.28 0 0 0 1.308 1.169c1.103.82 2.47 1.513 3.876 1.768 1.356.245 2.746.09 4.117-.76       4 1.41-.88 3.035-2.65 4.51-6.075a2.537 2.537 0 0 1 3.334-1.326Z" clip-rule="evenodd"/>
     <path d="M10.167 1.79a3.13 3.13 0 0 1 5.676.038l7.88 17.241A3.139 3.139 0 1 1 18 21.65l-5.024-11.307-5.689 11.523a2.994 2.994 0 0 1-5.39-2.606l8.27-17.468Z"/>
  </Icon>
)

Boris Li · Answer 27 · Sat Aug 12 2023 15:22:14 GMT+0800 (China Standard Time)

Thank you very much @cjnewco

Jean Tinland · Answer 28 · Thu Oct 05 2023 19:40:30 GMT+0800 (China Standard Time)

I added Mimestream & Anki icons.

@cjnewco & @mrala I added your icons (Arc & Pins) in master, thanks!

Jonas · Answer 29 · Fri Dec 08 2023 20:12:05 GMT+0800 (China Standard Time)

Is this where I can request? I'm missing:

Apple calendar
SuperProductivity https://super-productivity.com
GnuCash https://gnucash.org

Thanks ❤️

Jean Tinland · Answer 30 · Mon Dec 11 2023 19:20:32 GMT+0800 (China Standard Time)

I added SuperProductivity & GnuCash icons. Let me know if they are correctly linked to the app. If not let me know the exact app/process name so I can correct it.

About the Apple Calendar app there is already an icon linked to the app (app name: "Calendar"). What is the app/process name of you calendar app?

Jonas · Answer 31 · Tue Dec 12 2023 18:10:37 GMT+0800 (China Standard Time)

Ah, my calendar app name is localized to "Kalender".

Its "Gnucash" and "Super Productivity" for the other two app names, changed those names (and Calendar->Kalender) in app-icons.js and they all show up nicely, thanks a lot 😃

Jean Tinland · Answer 32 · Sat Dec 16 2023 00:28:43 GMT+0800 (China Standard Time)

Okay, thank you for the information. I corrected both app names in app-icons.js and added the icon localization for Calendar.

I don't plan to add more icon in languages other than english as it is supposed to be the only one supported but I sometimes make exceptions. On the long run I don't want to increase to much the code base size.