The current iSH home screen icon is not that nice looking. I'm bad at designing icons, so I thought I'd see if any users have good ideas. I'm also bad at judging other people's icons, and iOS apps can change the home screen icon at runtime, so why not put in every icon? Post your icon idea here and I'll add it to the app.
Rules:
- The icon should make sense as an icon for iSH. (duh)
- The icon should not have rounded corners. Those get added by iOS automatically.
- A 1024x1024 PNG of the icon should be under 50kB. I don't want to end up with icons taking up more space than the rest of the app. The current icon fits in 5kB so this shouldn't be too hard.
- To save space, I'll only accept a few different color or style variations of the same icon.
- The icon license must allow it to be used as an icon for iSH. CC-BY-4.0 works well. There will be attribution, in the form of your name and a link to your GitHub post. In case someone forgets: By posting an icon here, you agree to license it under CC-BY-4.0, unless you specify otherwise.
tbodt
All 77 comments
What stuff do you want icons for, or do you want updated versions of the current ones?
Rexogamer
on 7 Dec 2019
Home screen icons. Should mention that at the top.
tbodt
on 7 Dec 2019
All attached images are licensed under
CC BY
PyDann
on 8 Dec 2019
uninspired
saagarjha
on 8 Dec 2019
Random thought
CC-BY
01010101lzy
on 8 Dec 2019
#
TechUpdateGuy
on 8 Dec 2019
01010101lzy
on 8 Dec 2019
01010101lzy
on 8 Dec 2019
@01010101lzy @TechUpdateGuy any preference on which of the icons you posted you'd like me to use?
tbodt
on 8 Dec 2019
I like @TechUpdateGuy 's first and @PyDann 's third, if my opinion matters 😅
alessaba
on 8 Dec 2019
@01010101lzy @TechUpdateGuy any preference on which of the icons you posted you'd like me to use?
I personally prefer the last two "i#"-like icons, although the colors may need some refining.
01010101lzy
on 10 Dec 2019
@01010101lzy I played around a little with the colours on your i# suggestion. Hope that's ok 😀
Probably the text should also be a little bigger?
FD-
on 10 Dec 2019
I messed around with one other icon submission but I lost my glasses so if I’m blind please tell me
c0dine
on 12 Dec 2019
Looks pretty good!
Filippo Claudi
Il giorno 12 dic 2019, alle ore 03:57, Regularcheckm8 notifications@github.com ha scritto:
This is the image I messed around with one other icon submission but I lost my glasses so if I’m blind please tell me—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub, or unsubscribe.
alessaba
on 12 Dec 2019
the current icon already looks perfect
iliaskarim
on 12 Dec 2019
@TechUpdateGuy I unfortunately couldn't use your icon because it's too big: 1.5MB as a png, and the limit is 50k
tbodt
on 15 Dec 2019
Isn't it 50 KB?
saagarjha
on 15 Dec 2019
oops
tbodt
on 15 Dec 2019
I dabbled a bit and came up with this (multiple previews for the same icon, I also already exported all the App Store required sizes):
Here're all the required iOS icons (including spotlight and so on)
terhechte
on 16 Dec 2019
This looks amazing too 😍
Probably the best
alessaba
on 16 Dec 2019
Personally I like the first one in https://github.com/tbodt/ish/issues/578#issuecomment-563969573 (although I’d make the text the same size as the second one, without the effects)
Rexogamer
on 16 Dec 2019
I like this one but I don’t like that it looks like it’s at an angle to other apps. It doesn’t feel like it fits in. Maybe if it was the same $ but not rotated it would fit in better
ntindle
on 16 Dec 2019
I created a unrotated version that mimics the "$" at the beginning of a shell line in an empty container
terhechte
on 17 Dec 2019
@terhechte That's a nice icon, but unfortunately 20x the 50kb limit. I'm considering adjusting the rules so you only need a 256x256 icon to fit in 50kb, rather than 1024x1024. But keep that in mind when submitting.
tbodt
on 17 Dec 2019
@tbodt I can get it to ~180kb as a png and 35kb as a jpeg (in 1024x1024) if that helps. 256x256 would obviously be easy to pull off.
terhechte
on 17 Dec 2019
this is the best icon in this thread so far which one doesn't hurts my eyes: https://github.com/tbodt/ish/issues/578#issuecomment-562960935
Envo
on 17 Dec 2019
@tbodt I heard you had problem with File Size, so I been creating a Automator Shell Script to compress my files as much as possible. Do you by any chance have preference for the Zip compression " either .zip or .tar.gz" ?. I was planning to submit zip file.
TechUpdateGuy
on 17 Dec 2019
Just Found something interesting, that aligns with App Interface. (24KB w/ ImageOptim)
TechUpdateGuy
on 17 Dec 2019
@TechUpdateGuy png please. General commission formats like zip can't be used for app icons because there's no point: image compression does a better job because it has context, and the app bundle is zipped anyway.
tbodt
on 18 Dec 2019
So Based on @01010101lzy I created my own version of art. Also., Personally, @terhechte I loved the the tilted logo. I was wondering how you came up with the idea?
My Submission Entry #2:
_Image_1_ ................ Here is a 30KB [1024x1024] File (Preview Purposes)
_Image_2_, ................ Here is a 44KB [512x512] File (Submission)
_Image_3_, ................ Here is a 75KB [512x512] File (Preview Purposes)
_Image_4_ , ................ Here is a 46KB [1024x1024] File (Submission)
UPDATE : I just wanted to play around a bit, having file size constraints to 50KB. So, I added a newer version of icon I like to propose.
TechUpdateGuy
on 18 Dec 2019
Hey guys, I’m not a designer, but I tried to make an icon because I really liked this app...
Is just a sketch, so give me feedbacks if you liked it.
I thought about squares because of the original logo being dots... so I first thought about square instead of dots and then actual squares. I am thinking 3D here... so the letters would be facing away.
I used different colors of green to both represent the 3d and the letters.
I actually don't see a reason to work on a final design before any discussion, so... that's why it is a sketch
ricardohnn
on 18 Dec 2019
@ricardohnn If you are finalizing the design, please note few things,
The file size is 50KB limit, so that limits you with the following things:
1st: You can't use gradients if it is more than 2 colors or complex gradient style. Including, Brushes and patterns.
2nd: You can't lower you opacity more than 100% for anything you work with.
3rd: You should use as fewer colors as possible.
4th: Compression Algorithms Apps like _ImageOptim_ converts "Display P3" color profile as "sRGB". On the other hand, The iPhone's orginal recommended color profile is "Display P3, 16-bit channel". but for compression, you can export your files to "sRGB, 16-bit channel".
Edit: Remember, while you are editing, _Clipping Masks_ help you customize and play with color options. While Regular "_Mask_" helps you reduce size while exporting. So It might be handy to just "_Mask_" your final product before exporting.
TechUpdateGuy
on 18 Dec 2019
Hey guys I have no idea how to resize this without another app... So I will just leave the preview one.... I think vectorised would be better, but I also don't have any app here for that...
ricardohnn
on 18 Dec 2019
@ricardohnn I really like this, I will take a crack at this in Affinity Design tonight.
PyDann
on 18 Dec 2019
Hey guys I have no idea how to resize this without another app... So I will just leave the preview one.... I think vectorised would be better, but I also don't have any app here for that...
@ricardohnn I really like this, I will take a crack at this in Affinity Design tonight.
Oh that would be better... leave with the pros lol, thanks... BTW... It's horrible but I think you might get it right... Think as a sheet of paper... So corners should be rounded... At least that's what I thought
ricardohnn
on 18 Dec 2019
@ricardohnn what app did you used to draw sketches? The guidelines made the drawing more skillful.
TechUpdateGuy
on 19 Dec 2019
@ricardohnn so the first image falls well within the size limit. However, the second one is nearly double at ~95kb. Hopefully I’ve done your design proud. Let me know if you’d like to see some changes.
@TechUpdateGuy the app he is using is ProCreate
All attached images are licensed under
CC BY
PyDann
on 19 Dec 2019
@ricardohnn so the first image falls well within the size limit. However, the second one is nearly double at ~95kb. Hopefully I’ve done your design proud. Let me know if you’d like to see some changes.
@TechUpdateGuy the app he is using is ProCreateAll attached images are licensed under
CC BY
I think it's cool but i feel like the h part should be curved... I will redraw it correctly... I'm just being lazy really lol...
@TechUpdateGuy yeah it's procreate... I bought it recently... So i have no idea how to use it... And I'm more android based so have no clues which apps there are for ipad lol... So I'm just doing randomly... But i will improve the drawing with what "it should be" in my head...
ricardohnn
on 19 Dec 2019
@ricardohnn this will be the last one I post here, I don’t want to fill this thread with "Rough Drafts", hit me up on twitter (DannWai) if you want to correspond further!
All attached images are licensed under
CC BY
True story but it was more like the previous one... but again I too don’t want to fill with sketches... I think is more productive if the icon idea is decided and then it will be made the final version. Since the ideas are too different, I think it would be cool to hear from the developer... but hey nice work man... I accept tips and how to do it lol
ricardohnn
on 19 Dec 2019
An update on this: it turns out to be almost impossible to upload an app with alternate icons. So I won't be able to put them in for the next release, but I'll do it as soon as I figure out how to get Apple to accept the app.
tbodt
on 22 Dec 2019
An update on this: it turns out to be almost impossible to upload an app with alternate icons. So I won't be able to put them in for the next release, but I'll do it as soon as I figure out how to get Apple to accept the app.
I found this:
https://stackoverflow.com/questions/43233675/ios-10-3-how-to-change-app-icon-programmatically
iseth
on 29 Dec 2019
I believe the issue was with App Store distribution, not the alternative icon API.
saagarjha
on 29 Dec 2019
I like the current icon!
2br-2b
on 5 Jan 2020
I really like the i# design by @01010101lzy. Not too fond of $ designs because it makes it seem like a money app.
rnkn
on 14 Jan 2020
@PyDann's two proposals look great to me. What do these look like on the home screen?
msanders
on 17 Jan 2020
@PyDann's two proposals look great to me. What do these look like on the home screen?
From iOS, you can “long hold” any of the icon images, “copy to photos”, and use the Shortcuts app to create a shortcut to open iSH. Add the shortcut to your Home Screen and assign any of the icons you’d like to try!
PyDann
on 17 Jan 2020
Examples of a few on black
ntindle
on 17 Jan 2020
EDIT: was quite unhappy with the filesize (50Kb) so I did some optimizations and now each png is (4Kb). Also, image 2 changed slightly :)
relikd
on 20 Jan 2020
Hey team! I actually love the simplicity of the original icon, but I’m of the 1337 crowd, so I just did a quick color swap.
1337_icon.png
AudioBr4in
on 18 Aug 2020
Hi all, I am not a graphics designer but I thought I would take a challenge. I have been staring at these designs for days and don't even know anymore, so it is entirely up to preference of the devs, thanks for considering this. Of course, all design are CC-BY.
heronwr
on 20 Aug 2020
Still too big, and a WIP, but what do you all think?
easrng
on 22 Aug 2020
Created some new Icons for iSH
Decided to base the design off the mac terminal but gave it a cute spin
themanontv
on 24 Aug 2020
Also just made a straight up mac icon clone but not sure whether this is allowed
themanontv
on 24 Aug 2020
@themanontv Cloning Apple's icons is definitely not legal. For the other icons, could you upload a 1024x1024 version with no rounded corners?
tbodt
on 24 Aug 2020
Added the Requested Icon Formats
themanontv
on 24 Aug 2020
The new icon
stc2001
on 13 Sep 2020
aeilot
on 13 Sep 2020
I hope you like it
ousbaailyas
on 10 Oct 2020
I dabbled a little in Vectornator, and here’s the result:
Feel free to modify it however you’d like:
iSH-svg-vectornator.zip
FelixTornqvist
on 20 Oct 2020
I made some macOS Big Sur inspired icons. Here are their rounded and normal versions:
baranonen
on 23 Oct 2020
This is how they look in the home screen:
baranonen
on 24 Oct 2020
Re-drew the iSH logo with Sprite Pencil and then upscaled, indexed to 2 colour and then exported turning off ALL the optional extras, using GIMP.
This has resulted in a 1024x1024px logo contained within 549 bytes! At this stage, I'm not 100% sure of how well it will work, and, if it were to ever be used anywhere, it might need a bit of testing as not sure that by disabling ALL the options in PNG export that I might have introduced an incompatibility, somewhere, but here it is for your viewing pleasure, at the very least! :)
Icon is licensed under the GPLv2, as-per the original. Also, speaking for myself, no credit needed (nor particularly wanted) for the smaller-fication, I simply made smaller what @tbodt had already created! :)
_Edit: This is no longer the smallest. Posts on iSH's Discord have shown that a further 18 bytes can be saved, bringing the file size down to 531 bytes._
peterlewis
on 25 Oct 2020
@peterlewis I was intrigued whether I could reduce it further. I just took tbodt's app icon and applied a two-color index (one). Also, it can't be said enough, ImageOptim is a great tool. With my version it's 550 bytes. If I put your version through ImageOptim it is 514 bytes (two)
relikd
on 25 Oct 2020
514 bytes (two)
Hah, 514 bytes! Congrats, you're in the lead! :) And thank you for the ImageOptim pointer, it looks fab! 👍🏻
peterlewis
on 25 Oct 2020
Sprite 64
I had a play with @JaydenIrwin's Sprite Pencil and came up with the following icon, that I've nicknamed Sprite 64 ('Sprite' as it's a sprite made in Sprite Pencil, and '64' as the original dimensions are 64x64px, as well as the icon using colours from @ENDESGA's EDG64 palette).
Final icon - 1024x1024px
The final icon was upscaled, colour indexed and exported using GIMP. It was then further optimised using ImageOptim (thanks, @relikd!), resulting in it weighing-in at just over 2kB.
Original icon - 64x64px
If anyone fancies improving upon it, here's the original icon, created in Sprite Pencil.
_The icons in this comment are licensed under CC-BY-4.0._
peterlewis
on 26 Oct 2020
iSH - Reworked
_If anyone out there is rolling-their-own build of iSH and would like to use this, I've made a branch that includes this icon at the requisite dimensions - this can be found here._
I know that @tbodt said "The current iSH home screen icon is not that nice looking" but personally I don't agree! I feel that it's iconic and those who use iSH may immediately recognise it by its icon, I certainly do!
With this in mind, I took the original icon, gave it a wee nip-and-tuck (by halving the distance between the segments) and added the gradient from ish.app (which was kindly suggested by @Mnpn03).
Using Affinity Designer, it had a super-smooth gradient that looked nice, but in terms of file size it was a bit on the heavy side, so I took @relikd's kind advice and reduced the gradient steps using Affinity Photo. This has resulted in a far-more-digestible 3kB file:
Also, here's a side-by-side, for anyone who's keen to see how this rework looks alongside the original:
_'iSH - Reworked' is a modification, made on 2020-10-27, of the original icon that was created by @tbodt and licensed under the GPLv2._
Update: I have updated the icon in order to snap to pixel coordinates, as suggested by @relikd!
Update 2: I've reduced the colour steps of the gradient in order to drastically reduce the file size from 233kB to 3kB, also kindly suggested by @relikd!
peterlewis
on 27 Oct 2020
@peterlewis your white isn't pure. The icon has 10 shades of white. That is mostly because the rectangles are not aligned with the grid resulting in shadowy bevels. If you snap it to pixel coordinates it should reduce the size.
Also, try reducing the gradient colors. I don't think anyone will be able to see the 220 different shades anyway.
One last thing, and that is purely aesthetics. Can you try and increase the distance between the top-right and left-bottom rectangle a tiny bit? Due to the top-bottom distances of the middle rectangle, the space looks wider in the middle than on the outer edge. I know it is all perfectly equal apart, but it does not look like that. … or my eyes are playing tricks on me. The longer I look, the more uniform it gets.
relikd
on 27 Oct 2020
Отправлено с iPhone
27 окт. 2020 г., в 20:16, Peter Lewis notifications@github.com написал(а):
iSH - ReworkedI know that @tbodt said "The current iSH home screen icon is not that nice looking" but personally I don't agree! I feel that it's iconic and those who use iSH may immediately recognise it by its icon.
With this in mind, I took the original icon, gave it a wee nip-and-tuck (by halving the distance between the segments) and added the gradient from ish.app (which was kindly suggested by @Mnpn03).
The outcome of this is 'iSH - Reworked'! Unfortunately it no longer fits in less than 1kB (after running it through ImageOptim, so this might not be able to make an appearance within the app, but a 256x256px export fits in under 50kB (just in case @tbodt has loosened the rules, a wee bit!).
Also, here's a side-by-side, for anyone who's keen to see how this rework looks alongside the original:
'iSH - Reworked' is a modification, made on 2020-10-27, of the original iconthat was created by @tbodt and licensed under the GPLv2.
—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub, or unsubscribe.
ilyastray777
on 27 Oct 2020
Ah that's a super helpful reply, thank you, @relikd!
@peterlewis your white isn't pure. The icon has 10 shades of white. That is mostly because the rectangles are not aligned with the grid resulting in shadowy bevels. If you snap it to pixel coordinates it should reduce the size.
Thank you! I wasn't aware that was a thing! I've turned on pixel snapping and realigned, taking this into account, and uploaded this in the above comment. Would you mind taking a look at the updated to see if this looks better, now?
Also, try reducing the gradient colors. I don't think anyone will be able to see the 220 different shades anyway.
I don't think the vector editor that I have been using allows me to reduce the colour steps of the gradient, I'm afraid! I'll look into it though.
One last thing, and that is purely aesthetics. Can you try and increase the distance between the top-right and left-bottom rectangle a tiny bit? Due to the top-bottom distances of the middle rectangle, the space looks wider in the middle than on the outer edge. I know it is all perfectly equal apart, but it does not look like that. … or my eyes are playing tricks on me. The longer I look, the more uniform it gets.
Eek! I get what you mean, but If I did that then I don't think I would ever sleep again, unless something something Fibonacci! :)
peterlewis
on 27 Oct 2020
Would you mind taking a look at the updated to see if this looks better, now?
Alright, a few more tweaks and it is done. Surprisingly your color palette just had 62 colors and was still quite large.
First, here is the 3 KB version:
Second, technical background on why it is smaller now.
Since reducing the color palette did not reduce size (that much) it had to be the gradient itself. Apparently, the gradient was not strictly linear, but contained different colors in the same line. E.g., a little lighter to the left but a little darker to the right, you get the idea. Or it was tilted—if you did copy the angle from the website?
Anway, a little background on how PNGs are optimized: You can save bytes if you define one color and then say how often that color repeats. With a perfect gradient it would “put color #20233c at the top” and then say “repeat that color for 1024 pixels.” In my case probably, repeat that for 100 lines * 1024. This icon uses 63 colors minus one for white. It can only repeat up to another color, another shade of gray or white.
So that is what I did. Recreate the gradient with a straight path and pure colors that create as much chunks of uniform color as possible.
And that's how to save a lot of disk space ;-)
… and because I did terrible on explaining the gradient issue, here is it illustrated. On the left is your gradient, which will look nicer on print, etc. On the right is my version, which is not as nice visually, but smaller on filesize.
relikd
on 28 Oct 2020
Alright, a few more tweaks and it is done.
Awesome, thank you for that @relikd! I've had a play and it appears that my applying the gradient using a vector tool may have looked shiny, but wasn't very efficient! :)
I've re-applied the gradient as a raster and my PNG export is now also 3kB. I've updated my comment/post to include this!
Thank you for the advice and for going into so much detail, it was extremely helpful and very-much appreciated!
peterlewis
on 28 Oct 2020
I made a rough icon within 50 KB, thoughts anyone? It’s not squared up, but is the idea ok?
TheGamer1002
on 30 Oct 2020
It’s minimalistic icon for iSH Shell
Tuzikupka
on 31 Oct 2020
@Tuzikupka please remove or redo your self-added rounded border, it adds an ugly white line on dark background.
relikd
on 31 Oct 2020
Here's a slightly different take, using a lambda symbol instead of an octothorp:
Here's my SVG source:
<svg width="256" height="256" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fill-rule="evenodd">
<path fill="#2D2D2D" d="M0 0h256v256H0z"/>
<path d="M25.55 96l18.243-44.918h.43l15.56 44.044h9.55L48.086 38.404C42.72 22.994 37.569 16 26.624 16c-4.615 0-7.405.874-9.873 1.967l2.254 7.432c1.824-.874 3.756-1.749 6.653-1.749 6.439 0 10.087 4.372 13.521 14.645l.859 2.514L16 95.126l9.55.874z" fill="#40BF51" fill-rule="nonzero"/>
<path stroke="#B7BF40" stroke-width="3" d="M86.452 17.5h27.476v77H86.452z"/>
</g>
</svg>
Lambda colour is hsl(128, 50%, 50%)
Cursor box is hsl(64, 50%, 50%)
Line height is 80px, and padding is 16px.
The lambda symbol is from Hasklig, which is under SIL Open Font License 1.1.
LukeChannings
on 9 Nov 2020
wack-inc
on 11 Nov 2020
here's mine
arandomdos
on 12 Nov 2020
Related issues
saman1111111
·
4Comments
jcampbell05
·
5Comments
tommythorn
·
4Comments
rluvaton
·
3Comments
wsjyhaozi
·
4Comments
Most helpful comment
All attached images are licensed under
CC BY