Icon Requests Tracker Issue
kvndrsslr opened this issue ยท 38 comments
Current Icon Tracker
- RocketChat
- Super Productivity
- Gnucash
- MimeStream
- Anki
- Arc
- Pins
- TickTick
- Final-Cut-Pro
- Setapp
- Sublime text
- Matlab
- Tor Browser
- moneymoney
- GrandTotal
- Receipts
- Typora
- Calibre
- CleanmymacX
- Vivaldi
- Atom
- Folx
- Xcode
- Zulip
- Kakoune
- KeePassXC
- MailMate
- Zotero
- Signal
- mpv
- zathura (has no icon though โ maybe a 'generic' pdf icon?)
- Skim
- Element
- Tower
- Apple Preview
- VSCode Insiders
- OmniFocus
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 inapp-icons.js
Preview? :)
Feel free to add my fork as a git-remote and checkout my main branch for preview!
Oh, you meant the app Preview! Thought you wanted to preview the new icons.๐
how about these applications
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.
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.
Just wondering if we could add a few more icons such as:
Vivaldi
Atom
Folx
Xcode
I added these 4 to the list!
I am wondering if there's any way to adjust the size of the icons in the bar?
Can we please get system preferences in here too please
I added a gear icon for System preferences
app in my latest commit!
Thank you! Can we please get the News icon as well please
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.
I'd love an Omnifocus icon!
Awesome work, love this bar. An email icon for https://mimestream.com/ would be nice, thanks!
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.
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!
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.
Pushed a few more icons your way:
- Plexamp
- Adobe Photoshop
- Adobe Illustrator
- Adobe After Effects
- Creative Cloud
- Bitwig Studio
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>
);
Can I get an icon for the Arc Browser?
https://arc.net
Thank you very much @kvndrsslr
@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>
)
Thank you very much @cjnewco
Is this where I can request? I'm missing:
- Apple calendar
- SuperProductivity https://super-productivity.com
- GnuCash https://gnucash.org
Thanks โค๏ธ
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?
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 ๐
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.
Could you please add icons for OrbStack and Chatterino? Here are my attempts:
export const OrbStack = (props) => (
<Icon {...props}>
<path d="M6.348 0h8.511c1.45.04 2.907-.05 4.356.094 1.105.11 2.191.535 3.02 1.289a4.941 4.941 0 0 1 1.453 2.273c.269.856.292 1.758.312 2.649v11.46c-.023.801-.043 1.61-.258 2.387-.25.993-.82 1.891-1.594 2.559a5.151 5.151 0 0 1-2.261 1.102c-.696.156-1.418.164-2.13.187H6.255c-.89-.027-1.8-.047-2.652-.332a5 5 0 0 1-3-2.61c-.465-.949-.563-2.023-.579-3.066-.03-1.168.008-2.336-.023-3.504V7.16c.035-1.137-.023-2.3.297-3.41A5.017 5.017 0 0 1 3.016.574C4.05.07 5.219.047 6.348 0m4.539 3.324a8.536 8.536 0 0 0-5.102 2.461C4.34 7.2 3.434 9.141 3.235 11.152c-.016 1.036-.083 2.09.21 3.094.38 1.465 1.13 2.852 2.223 3.906 1.324 1.418 3.168 2.325 5.09 2.578 1.527.145 3.129.032 4.531-.64 1.168-.77 2.137-1.809 2.887-2.98.258-.485.605-.919.742-1.458.008.508-.438.844-.54 1.317a12.396 12.396 0 0 0 1.61-4.41c-.008-.473.125-.934.106-1.407 0-.437.156-.867.07-1.308a8.611 8.611 0 0 0-.777-2.176c-1.594-3.004-5.145-4.766-8.5-4.344Zm0 0"/>
<path fill-opacity=".7" fill-rule="evenodd" d="M6.977 5.352c.343-.223.707-.543 1.148-.422-.703.578-1.21 1.355-1.836 2.011-.71.762-1.351 1.59-1.965 2.43-.238.36-.27.844-.625 1.121-.11-.765.332-1.433.543-2.133.551-.996 1.235-1.933 2.102-2.671.176-.118.36-.235.515-.38.016-.113.098-.253.235-.23-.032.094-.078.18-.117.274ZM13.633 6.063c.738-.055 1.539.019 2.172.445.238.133.515.219.703.43.332.351.71.667.937 1.101.242.445.528.871.703 1.352.207.504.293 1.046.364 1.582-.016.566.074 1.152-.145 1.691-.172.625-.656 1.176-1.285 1.352-.344-.133-.703-.34-.855-.696-.145-.308-.356-.586-.508-.89a17.213 17.213 0 0 0-1.192-2.192 32.978 32.978 0 0 0-1.054-1.75c-.348-.597-.641-1.261-.582-1.968.203-.207.43-.442.742-.457Zm0 0"/>
</Icon>
);
export const Chatterino = (props) => (
<Icon {...props}>
<path d="M2.879 16.969s-.621-1.344-.957-2.856a9.693 9.693 0 0 1-.168-2.832c.285-4.008 2.973-8.57 7.629-10.008 3.48-1.082 7.082-.867 9.695 1.055 3.336 2.473 3.195 3 3.195 3l-4.73 4.656s-1.055-2.113-3.285-2.879c-1.563-.554-2.809-.335-3.89-.144C9 7.199 6.624 8.137 4.944 10.223c-.578.722-1.082 1.464-1.488 2.547-.723 1.992-.578 4.199-.578 4.199"/>
<path d="M13.992 23.762h-.238c-3.531-.121-5.617-1.008-6.555-1.54-.36.364-.91.817-1.558 1.06-1.13.405-2.45.238-2.52.238l-1.754-.239 1.418-1.058c.024-.024.79-.621.79-1.606.027-1.273-.31-1.898-.575-2.426-1.32-2.566-1.848-4.703-1.68-6.96C1.61 7.343 4.223 2.448 9.238.91c3.84-1.177 7.489-.766 10.059 1.151 3.625 2.692 3.48 3.313 3.383 3.672l-.047.196-5.473 5.328-.433-.914c0-.024-.817-1.656-2.665-2.23-1.124-.36-2.496-.024-3.261.48-2.067 1.39-2.664 3.695-1.465 5.496.937 1.367 2.328 2.039 4.031 1.918 1.848-.121 3.387-2.352 3.387-2.375l.476-.723 5.692 5.547-.363.504c-.145.215-3.649 4.8-8.567 4.8m-7.031-3.48.574.453c.024 0 1.899 1.442 6.266 1.586 3.406.121 6.191-2.593 7.199-3.718l-3.55-3.48c-.747.862-2.184 2.23-3.962 2.35-2.23.145-4.105-.745-5.328-2.542-1.656-2.45-.863-5.664 1.848-7.489 1.055-.722 2.832-1.203 4.488-.671 1.512.476 2.496 1.46 3.024 2.16l3.55-3.457c-.308-.336-1.008-1.032-2.636-2.235-2.188-1.629-5.403-1.965-8.786-.933C5.281 3.625 3 7.922 2.762 11.352c-.145 1.968.308 3.816 1.535 6.168.383.746.766 1.609.742 3.12a3.16 3.16 0 0 1-.336 1.415c.145-.024.29-.07.434-.117.597-.22 1.199-.868 1.367-1.083Zm0 0"/>
</Icon>
);
I opened a PR to add those icons and sorted the list of apps and icons to make it easier to work with: #393
That's nice, thanks!
May I request RocketChat? ๐
May I request RocketChat?
๐
Here's an attempt for RocketChat:
<Icon {...props}>
<path fill="#c1272d" d="M24 12a8 8 0 0 0-1-4 9.6 9.6 0 0 0-2.7-3c-2.2-1.6-5-2.5-8-2.5-1 0-2 0-3 .3a9.9 9.9 0 0 0-2-1.7C3.2-1.2 0 1 0 1s3 2.8 2.6 5.4A8.3 8.3 0 0 0 .5 12c0 2 .7 4 2 5.5C3 20 0 23 0 23s3.3 2.2 7.2 0c.8-.5 1.5-1.1 2-1.8l3 .3c3 0 5.9-.9 8-2.5 1.2-.8 2-1.8 2.7-3a8 8 0 0 0 1.1-4Zm0 0"/><path fill="#fff" d="M12.2 4.5c5.6 0 10.1 3.4 10.1 7.5 0 4.2-4.5 7.6-10 7.6a13 13 0 0 1-3.6-.5c-1.1 1.6-3.6 3.7-6 3a7 7 0 0 0 1.7-5.3A6.5 6.5 0 0 1 2.1 12c0-4.1 4.5-7.5 10.1-7.5"/><path fill="#c1272d" d="M12.2 13.8c.8 0 1.4-.7 1.4-1.5 0-1-.6-1.6-1.4-1.6-.7 0-1.3.7-1.3 1.6 0 .8.6 1.5 1.3 1.5Zm4.7 0c.7 0 1.3-.7 1.3-1.5 0-1-.6-1.6-1.3-1.6-.8 0-1.4.7-1.4 1.6 0 .8.6 1.5 1.4 1.5Zm-9.3 0c.7 0 1.3-.7 1.3-1.5 0-1-.6-1.6-1.3-1.6-.8 0-1.4.7-1.4 1.6 0 .8.6 1.5 1.4 1.5Zm0 0"/><path fill="#ccc" d="M12.2 18.6c-1.2 0-2.4-.2-3.5-.4-1 1.2-3 2.8-5.1 2.7l-.9 1.2c2.4.7 4.9-1.4 6-3 1 .3 2.3.5 3.5.5 5.6 0 10-3.4 10.1-7.5 0 3.6-4.5 6.5-10 6.5Zm0 0"/>
</Icon>
@exic I added the RocketChat icon, please let me know if this is working well!