These days, most zoom icons used pretty much anywhere take the form of a magnifying glass with a plus, minus, or equals sign in it. However Breeze icons diverges from this convention, in an attempt to show a more literal depiction of a zooming operation. In my opinion, it doesn't really work to communicate the point, and also suffers by diverging form the common magnifying glass iconography--flawed though it may be.
Created attachment 157601 [details] Existing zoom icons + new ones I've created for comparison. Some zoom icons, as per Nate's comments I think the zoom icons might be clearer if the usual magnifying glass is used. At least for the basic zoom in/out ones, the others maybe not so necessary or maybe are clearer for complex use cases. But I made some drafts as per attached.
Oh, these are great! So much clearer! I especially like your take on `zoom-pixels`. That one looks really nice. The magnifying glasses all having different sizes might not be ideal though. It would be best if we could make them all have the same size somehow.
Notes: there are 3 sizes of magnifying glass, there was a method to it: 1. Big ones (diameter=16px); For where there's something complex inside them. These ones have somewhat stubby handle due to space constraints, but I think it looks OK. E.g. zoom-pixels, zoom-2-to-1, zoom-original. 2. Medium (diameter=13px); Realistic handle length & enough space inside it to put a clear plus/minus symbol. E.g. zoom-in, zoom-out. 3. Small ones (diameter=9px); where there's something going on around it. E.g. zoom-previous, zoom-width, zoom-out-x. The arrow heads are a bit difficult so, these are still WIP. The plain 'zoom' one is a bit unclear in the original, so I just made it an empty eyeglass.
The zoom pixels one is even better when smaller, it almost looks spherical, like a visual trick.
Created attachment 157602 [details] The 3 sizes, separated.
Created attachment 157639 [details] All magnifying glasses are the same size now.
Nice!
I'm not so sure about the X / Y ones, got some other ideas coming soon.
Created attachment 157647 [details] V4 Zoom X & Y
Created attachment 157648 [details] Other XY with actual axes at the top of this pic, but unclear in terms of zoom in vs out.
Created attachment 157653 [details] v5: all arrows same solid stytle now (works better at 22px) and other minor fixes.
Putting the symbols inside the glass does help with the size discrepancy. But will that work at 16px? I worry that there just won't be enough room to see the symbols. Also, since the symbols are small and inside the glass area, the icons become kind of samey and hard to distinguish at-a-glance. I think maybe your previous approach of having some of the iconography outside of the magnifying glass component might have better usability.
I've been checking things stay clear enough down to 22px, which is difficult itself, but I hadn't been checking 16px. 16px is quite difficult as things always get quite smudged at 16px. However, the original icons handle it quite well because they stick to using boxes. We could always keep a mix of existing & maybe just replace the zoom icons that get used in non-technical programs, i.e. the basic zoom-in / zoom-out / zoom, and leave the existing icons as they are?
Hmm, I think it would be weird for the icons to totally change style at 16px vs 22px. We should strive for a style that works for both, as much as is practical.
I didn't mean to have different pixels at different icon sizes, just not to use all of my round ones for all the different icons if they don't work at all sizes. I think the basic zoom/in/out ones work at all sizes with magnifying glasses and are common enough that it would be good if they were magnifying glasses, but the other zoom icons seem very technical/rare that it wouldn't be that bad if they were left as they are.
In the latest version, I am confused by x-in, x-out, y-in, y-out communicating their direction with two pieces at once: the arrow direction and the +/- sign inside the magnifying glass. IMHO arrow should become either a line, or a double-sided arrow.
(In reply to ratijas from comment #16) > In the latest version, I am confused by x-in, x-out, y-in, y-out > communicating their direction with two pieces at once: the arrow direction > and the +/- sign inside the magnifying glass. IMHO arrow should become > either a line, or a double-sided arrow. Yes, I wasn't sure about those either. The negatives with the arrow pointing in the negative axis direction would make them positive.
(In reply to Philip Murray from comment #17) > (In reply to ratijas from comment #16) > > In the latest version, I am confused by x-in, x-out, y-in, y-out > > communicating their direction with two pieces at once: the arrow direction > > and the +/- sign inside the magnifying glass. IMHO arrow should become > > either a line, or a double-sided arrow. > > Yes, I wasn't sure about those either. The negatives with the arrow pointing > in the negative axis direction would make them positive. However, the original X/Y icons used arrows in the 4 directions also.
Created attachment 157751 [details] Pix attached of some versions that hopefully work decently at 16 & 22px sizes.
Numbers provided for easy referencing. Some of the width/height ones with bigger arrows don't work well for the "fit-best" one that usually goes with them.
Created attachment 157760 [details] More of Zoom - In/Out - X/Y Still not happy with the zoom ones I posted yesterday. They seem more like zoom left/right/up/down, which I doubt is what's needed. So, made some more! v2 & v3 use a small magnifying glass, with separate +/- symbols and X/Y axes. They are quite clear, but the axis markings on v2 get a bit smudged at 16px but they look more like axes than v3. Note: it is difficult to have an arrow on the axis as it gets ugly at small sizes. v4 uses a bigger circle, but the handle is very small & probably unclear at 16px. v5 is a max sized circle, with basic lines as axes (not sure if they work), also with very small handle. v6 is my usual 15x15 circle, with better handle, but with the design of v5.
Created attachment 157761 [details] More of Zoom - In/Out - X/Y (added v7).
Ah, I've just realised there are different sized icon files for different pixel width/heights, so the 16px ones could be made clearer than the above ones as I was only working at 22px & using Dolphin to scale them down. I won't make the 16px versions until anyone has preferences for which seem any good or not. Thanks.
Idea: for those tricky icons, we can put the plus or minus inside the glass, attach the direction indication arrow to the end of the handle, and rotate the handle to point in the direction of the zoom.
Created attachment 157819 [details] Nate's idea + one where the plus symbol is external. These are native 16px icons. v0 & v1 have 1px larger circle than v2. Only these two I can align a plus symbol into the middle. The handle then becomes either 1px wide, I've also done a 3px wide one, but I usually used 2px in most other icons. v2 is the handle-direction but with external plus symbol.
Created attachment 157821 [details] 16px with arrowed axes & external symbols. Working on 16px size natively makes it easier to make clear arrows. So, any of my previous 22px ones that looked a bit blurry at the 16px size, could be redone more clearly.
Created attachment 157826 [details] Pointy XY Circles (16px native).
Oh I like the pointy circles!
Created attachment 157828 [details] XY-Zoom-Drops
PointyCircles & ZoomDrops don't have the magnifying glasses as being concentric, well, all the ones today maybe aren't concentric, as a result of having arrows come out of each side I have to move it around. Should be OK, just mentioning in case that's undesirable.
Created attachment 158717 [details] Montage of 22px width (x), height (y), best fit (z) icons Just trying out the new montage thing, it is quicker than how I was doing them previously. :) These are the 22px width (x), height (y), best fit (z) icons. Boxes added to help shows groupings. Some of these are posted before, but some have variations in size of magnifying glass or arrow type (triangle or line). The 005 set are actually very close to being the original icons (000 set), same arrows + slightly different side/corner lines, but with a magnifying glass in the middle.
Created attachment 158718 [details] Montage of 22px width (x), height (y), best fit (z) icons.
Created attachment 158719 [details] Updated montage.
Sorry for forgetting about this, Philip. I'm a bit confused regarding the latest montage; I think it would be helpful to label each icon with its filename, and ideally if we could see the original icon next to the proposed new icon. That way people could make better comparisons and we could nail down which new icons are perfect, and which new icons could use some more changes.
Hi Nate, no worries. I'd kinda left these ones & went & did some others & half forgot about these. I can't really remember what I was doing and I may have renamed files into that last summary, probably because my naming of the files on my HDD were a mess too. :) I think the last montage shows; - first the original icons as a set beginning name '000' and the 'x/y/z' denoting the zoom being in the z-axis/y-axis/both-axes. - thereafter, 001 to 015 my fifteen sets of three icons. E.g. 001x + 001y + 001z is set #1.
Thanks Philip. Of those, I think my favorites are the versions with the arrows fully inside the circle, with the circle unbroken.
Created attachment 165916 [details] Original zoom icons vs my latest set (all using same magnifying glass size & unbroken circle)
Note: I prefer to avoid tiny arrows in some of them as they don't look good. e.g. in the zoom-1-to-2 & zoom-2-to-1 pair, and the zoom-fit-... set.
Created attachment 165943 [details] Same as before but with 16px versions included
The +/- symbols in the first four 16px icons, for zoom-(in/out)-(x/y), are smaller than I'd like, but the axis takes up space & then there isn't space to make a 5x5 symbol, hence they are 3x3. I could move the axis to the side & remove their 'notches' but then it is unclear what they are. The zoom-1-to-2 and zoom-2-to-1 don't look quite as nice at 16px. I have used proper double/halving of the rectangles within the zoom circle, but I could make it the small rectangle bigger? but then it wouldn't exactly be a doubling of the dimension.
Honestly those look perfect to me! I'd recommend submitting a merge request to breeze icons as the next step. Thanks a lot for working on this!
You're welcome. I'll create the 32px set and then submit a merge.
A possibly relevant merge request was started @ https://invent.kde.org/frameworks/breeze-icons/-/merge_requests/326
Git commit f6376248c420d634bf9da87fc423eb97540b299e by Nate Graham, on behalf of Philip Murray. Committed on 25/03/2024 at 19:57. Pushed by ngraham into branch 'master'. Use magnifying glass iconography for zoom icons The current zoom icons use a square iconography that is not as readily recognizable as magnifying glass ones that are typically used. FIXED-IN: 6.1 M +7 -12 icons/actions/16/y-zoom-in.svg M +8 -11 icons/actions/16/zoom-1-to-2.svg M +8 -11 icons/actions/16/zoom-2-to-1.svg M +8 -11 icons/actions/16/zoom-fit-best.svg M +8 -11 icons/actions/16/zoom-fit-height.svg M +8 -11 icons/actions/16/zoom-fit-width.svg M +7 -12 icons/actions/16/zoom-in-x.svg M +8 -11 icons/actions/16/zoom-in.svg M +8 -11 icons/actions/16/zoom-next.svg M +8 -11 icons/actions/16/zoom-original.svg M +7 -12 icons/actions/16/zoom-out-x.svg M +6 -11 icons/actions/16/zoom-out-y.svg M +8 -11 icons/actions/16/zoom-out.svg A +1 -0 icons/actions/16/zoom-pixels-symbolic.svg A +10 -0 icons/actions/16/zoom-pixels.svg M +8 -11 icons/actions/16/zoom-previous.svg M +6 -11 icons/actions/16/zoom.svg M +10 -20 icons/actions/22/labplot-1x-zoom.svg M +10 -20 icons/actions/22/labplot-2x-zoom.svg M +10 -20 icons/actions/22/labplot-3x-zoom.svg M +10 -20 icons/actions/22/labplot-4x-zoom.svg M +10 -20 icons/actions/22/labplot-5x-zoom.svg T +1 -14 icons/actions/22/labplot-zoom-in-x.svg T +1 -14 icons/actions/22/labplot-zoom-in-y.svg T +1 -14 icons/actions/22/labplot-zoom-out-x.svg T +1 -14 icons/actions/22/labplot-zoom-out-y.svg A +1 -0 icons/actions/22/x-zoom-in-symbolic.svg A +1 -0 icons/actions/22/x-zoom-in.svg A +1 -0 icons/actions/22/x-zoom-out-symbolic.svg A +1 -0 icons/actions/22/x-zoom-out.svg M +4 -4 icons/actions/22/y-zoom-in.svg A +1 -0 icons/actions/22/y-zoom-out-symbolic.svg A +1 -0 icons/actions/22/y-zoom-out.svg M +6 -12 icons/actions/22/zoom-1-to-2.svg M +6 -12 icons/actions/22/zoom-2-to-1.svg M +6 -12 icons/actions/22/zoom-fit-best.svg M +6 -6 icons/actions/22/zoom-fit-height.svg M +6 -6 icons/actions/22/zoom-fit-width.svg M +4 -4 icons/actions/22/zoom-in-x.svg A +1 -0 icons/actions/22/zoom-in-y-symbolic.svg A +1 -0 icons/actions/22/zoom-in-y.svg M +6 -12 icons/actions/22/zoom-in.svg M +6 -12 icons/actions/22/zoom-next.svg M +6 -12 icons/actions/22/zoom-original.svg M +4 -4 icons/actions/22/zoom-out-x.svg M +4 -4 icons/actions/22/zoom-out-y.svg M +6 -12 icons/actions/22/zoom-out.svg M +6 -12 icons/actions/22/zoom-pixels.svg M +6 -12 icons/actions/22/zoom-previous.svg M +7 -13 icons/actions/22/zoom.svg T +1 -13 icons/actions/32/labplot-zoom-in-x.svg T +1 -13 icons/actions/32/labplot-zoom-in-y.svg T +1 -13 icons/actions/32/labplot-zoom-out-x.svg T +1 -13 icons/actions/32/labplot-zoom-out-y.svg A +1 -0 icons/actions/32/x-zoom-in-symbolic.svg A +1 -0 icons/actions/32/x-zoom-in.svg A +1 -0 icons/actions/32/x-zoom-out-symbolic.svg A +1 -0 icons/actions/32/x-zoom-out.svg A +1 -0 icons/actions/32/y-zoom-in-symbolic.svg A +8 -0 icons/actions/32/y-zoom-in.svg A +1 -0 icons/actions/32/y-zoom-out-symbolic.svg A +1 -0 icons/actions/32/y-zoom-out.svg M +6 -11 icons/actions/32/zoom-1-to-2.svg M +6 -11 icons/actions/32/zoom-2-to-1.svg M +6 -12 icons/actions/32/zoom-fit-best.svg M +6 -12 icons/actions/32/zoom-fit-height.svg M +6 -12 icons/actions/32/zoom-fit-width.svg A +1 -0 icons/actions/32/zoom-in-x-symbolic.svg A +8 -0 icons/actions/32/zoom-in-x.svg A +1 -0 icons/actions/32/zoom-in-y-symbolic.svg A +1 -0 icons/actions/32/zoom-in-y.svg M +6 -11 icons/actions/32/zoom-in.svg M +6 -11 icons/actions/32/zoom-next.svg M +6 -12 icons/actions/32/zoom-original.svg A +1 -0 icons/actions/32/zoom-out-x-symbolic.svg A +8 -0 icons/actions/32/zoom-out-x.svg A +1 -0 icons/actions/32/zoom-out-y-symbolic.svg A +8 -0 icons/actions/32/zoom-out-y.svg M +6 -11 icons/actions/32/zoom-out.svg A +8 -0 icons/actions/32/zoom-pixels.svg M +6 -11 icons/actions/32/zoom-previous.svg M +7 -12 icons/actions/32/zoom.svg https://invent.kde.org/frameworks/breeze-icons/-/commit/f6376248c420d634bf9da87fc423eb97540b299e