Icon Requests Tracker Issue

[kvndrsslr]

Current Icon Tracker

• [x] RocketChat
• [x] Super Productivity
• [x] Gnucash
• [x] MimeStream
• [x] Anki
• [x] Arc
• [x] Pins
• [x] TickTick
• [x] Final-Cut-Pro
• [x] Setapp
• [x] Sublime text
• [x] Matlab
• [x] Tor Browser
• [x] moneymoney
• [x] GrandTotal
• [x] Receipts
• [x] Typora
• [x] Calibre
• [x] CleanmymacX
• [x] Vivaldi
• [x] Atom
• [x] Folx
• [x] Xcode
• [x] Zulip
• [x] Kakoune
• [x] KeePassXC
• [x] MailMate
• [x] Zotero
• [x] Signal
• [x] mpv
• [x] zathura (has no icon though – maybe a 'generic' pdf icon?)
• [x] Skim
• [x] Element
• [x] Tower
• [x] Apple Preview
• [x] VSCode Insiders
• [x] OmniFocus

Icon Contribution Guideline

(Originally posted by @Jean-Tinland in https://github.com/Jean-Tinland/simple-bar/issues/164#issuecomment-896912216)

For each icon I'm following these steps:

1. 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)
2. I'm setting the new icon in a 24x24 viewbox
3. Then I'm optimising it using SVGOMG
4. Finally I'm adding it to the icons.jsx file in order to make the association in app-icons.js

[d-miketa]

Preview? :)

[kvndrsslr]

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

[d-miketa]

Signal and Preview (standard PDF icon) in https://github.com/Jean-Tinland/simple-bar/pull/194

[kvndrsslr]

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

[MiuKaShi]

how about these applications

• Typora
• Calibre
• Zotero
• CleanmymacX
• TickTick
• Final-Cut-Pro
• Setapp
• Sublime text
• Matlab

[kvndrsslr]

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.

[d-miketa]

Signal/Zotero/Preview in https://github.com/Jean-Tinland/simple-bar/pull/195

[SijanC147]

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.

[thefudgeishot]

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

[Jean-Tinland]

I added these 4 to the list!

[m-k-S]

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

[bbamnesia]

Can we please get system preferences in here too please

[Jean-Tinland]

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

[bbamnesia]

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

[ArnstadFredrik]

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.

[ninjaguppy]

I'd love an Omnifocus icon!

[Tnixc]

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]

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

[occludedpixel]

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.

[mrala]

Could you please add icons for:

• GoodNotes
• Quip
• Screens
• SketchUp

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!

[cjnewco]

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]

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!

[Pe8er]

Pushed a few more icons your way:

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

[mrala]

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>
);

[litszwaiboris]

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

[cjnewco]

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

[litszwaiboris]

Thank you very much @cjnewco

[Jean-Tinland]

I added Mimestream & Anki icons.

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

[exic]

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

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

Thanks ❤️

[Jean-Tinland]

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?