Firefox-UI-Fix icon indicating copy to clipboard operation
Firefox-UI-Fix copied to clipboard

Published 20 hours ago • verified publisher icon black7375

Unify icon design langauge

Open ildiem opened this issue 3 years ago • 5 comments

Is your feature request related to a problem? The icons in the context menu, as well as the main menu, seem to be taken from different sources, making them look mismatched.

The solution I'd like Any new icons should follow Proton's design language (or whatever standard you'd prefer).

Additional context For example, different icons have different stroke thicknesses, as a result of being from different icon sets. Screen Shot 2021-09-07 at 6 04 57 PM

ildiem avatar Sep 07 '21 22:09 ildiem

I'm not a designer and I'm not good at using tools, so it may take a long time to fix them.

Info

If anyone wants to work on icons.

Known issues with current icons.

  • As reported, the thickness is not uniform.
  • Some icons are not 16x16 in size.
  • Some icons with too much inner padding.

When working

It can be seen as transparent because of the fill="context-fill" fill-opacity="context-fill-opacity" property. Fill in the color first and then proceed with the work.

https://github.com/black7375/Firefox-UI-Fix/blob/64c7eeebfbf025c02cff787f3dafade54707dd9a/icons/arrow-sort-down-lines.svg#L1

Icon post-processing

There is something to work on after modifying the icon.

  • Optimization: Graphic programs generate code without caring about optimization. It should be optimized using SVGO. It's also available online.
  • Property: width, height, viewBox, fill="context-fill, fill-opacity="context-fill-opacity" properties should be included.

black7375 avatar Sep 08 '21 08:09 black7375

Do these icons exist in older versions of Firefox? Maybe it's possible to retrieve them from their source code archives?

latere-a-latere avatar Sep 09 '21 14:09 latere-a-latere

Icon classification

1. Browser built-in icons

Issue

  • thickness is not uniform: 4px => 2.5px

Target Icons image

  • [ ] Save Page
  • [ ] Open File
  • [ ] Edit Controls
  • [ ] Repair text encoding
  • [ ] Email Link
  • [ ] Screenshot
  • [ ] Forget
  • [ ] Developer tools icons

2. Photon Icons

Issue

  • thickness is not uniform: 4px => 2.5px

Source

  • https://github.com/FirefoxUX/photon-icons
  • https://design.firefox.com/icons/viewer/

Target Icons

3. Fluent Icons

Issue

  • thickness is not uniform: 2px => 2.5px
  • Some icons not 16x16 in size.
  • Some icons with too much inner padding.

Target Icons - thickness only

Target Icons - thickness, not 16x16

Source I am using it because it is most similar to Proton's icon.

I'll try to document it as soon as I have time.

black7375 avatar Sep 10 '21 00:09 black7375

In this repro https://github.com/BPower0036/UserChrome you have most icons used in Firefox in Fluent design; this means that every icon will be the same as in Edge

Nomes77 avatar Oct 18 '21 16:10 Nomes77

Recently, I was adjusting the padding and size of the icon in the remaining time. (Based on 20x20) Let's work with your icons as well. I think it will be of great help!!

black7375 avatar Oct 18 '21 21:10 black7375

I can work on this. I've already done a bunch of icons but there's still many more to go. The ones that I've done are not in any particular order and I've also redone some icons that were blurry.

See: https://www.figma.com/file/Iyym2tjRVlb7rxTR1Gmvr8/lepton?type=design&node-id=0-1&mode=design

(tip: set the zoom to 100% to see how it should look when used)

zapSNH avatar Oct 20 '23 02:10 zapSNH

@zapSNH Wow. It's 100% set, so it's easy to compare with the blurry icon!! It's an issue that's been open for a long time, so I think it'll be cool if it's applied.

Overall, the icons have been improved, but there are some things that I want to maintain the metaphor for easy recognition.

For example, a folder icon. https://github.com/black7375/Firefox-UI-Fix/issues/33#issuecomment-853624879 There was an opinion that the original folder icon is close to a square, so it is difficult to recognize. image

And It also feels like animation when it's open. image

I will write some feedback within tomorrow and comment on it!! I love your work. :+1:

black7375 avatar Oct 20 '23 15:10 black7375

Feedback

Captured with Zoom 500%. I would like to express my gratitude for your work before full-fledged feedback. Your work feels good in the following side:

  • Consistent shape and thickness
  • Clean when it is Zoom 100% (Especially, text!!)
  • Simplification of shape
  • Looks more modern

Please feel free to let me know if you have any ideas that differ from mine.

1. Folder

Thank you for reflecting my opinion.

  1. The size of the folder on the right should be constant.

image

2. Tab

The difference from the previous one is the tab shape and the filling.

image

  1. I think it would be nice to see the icon different depending on the mode. (Need connect to toolbar like shape version too)

It looks like a new tab in Firefox, so it looks good. image

This project also supports other tab shape (conneted to toolbar). image

Maybe there are the next icons. image image image

  1. New tab icon should be filled only. (Other tab images look as empty as they currently are.)

Consistency is partially sacrificed, but filled icons serve as a emphasize. image

Compared to the panel of the edge, it is relatively easy to distinguish. image

It is natural to emphasize the creation of new tab in the menu that appears when you right-click on a new tab button. image

3. Bookmark toolbar

  • Since it is a toolbar, I think the rectangle will be more suitable than the square.

image

4. Clockwise

  • It means the past time state, so I hope the direction of the needle is different.

image

image

5. Tablet

  • How about small vertical bar add to right side?

It distinguishes the shape of the tab and is consistent with the shape of the phone.

image

6. Clipboard

  1. It would be better to have a size of the third bar twice.

image

If zoom is 100%, the third bar looks small. image

In other icons, it feels like it looks appropriate. image

  1. Broken arrow

It appears to be disconnected.

image

7. Dictionary

  1. The title bar is out of balance

I think it will look better if there is a adjustment in the width and the inner space size.

image

  1. The bottom right of the first dictionary

I think I'll look better if it round or empty.

8. Password Field

  • I think the matching is wrong

image

9. Duplicate window & Select all tab

As you may have felt while making it, the meaning of these three icons is a bit confusing. (from the beginning)

image

  • Duplicate tab
  • Duplicate Window
  • Select all tabs

The first one is the tab itself, so you don't have to touch it.

  • The second is Window`, so there should be a tab strip. image
  • The third is that we select all the tabs of Windows, so I hope it will be distinguished like the previous shape.

10. Tag

image

  • An additional tag icon is required to indicate when there is content image

11. Gift box

image

  • The string of the gift box should be connected image (https://www.indiamart.com/proddetail/handmade-explosion-gift-box-22417871112.html)

black7375 avatar Oct 21 '23 12:10 black7375

Thanks for your feedback. I have applied the feedback to most icons. However, I have some questions.

3. Bookmark toolbar

  • Since it is a toolbar, I think the rectangle will be more suitable than the square.

image

I have tried to make it a rectangle but at 100% zoom (i.e. 100% scaling) it'll either:

  • look weird (less than 1px between star and border) or image

  • have bookmarksToolbar-open be almost indistinguishable from the regular icon image

  1. Broken arrow

It appears to be disconnected. image

This is because there are two icons in each svg. This is how it should look like if they were separate. image

If you only use one then I can delete the other one in order to free a tiny bit of storage space.

image

  • Duplicate tab
  • Duplicate Window
  • Select all tabs

The third is that we select all the tabs of Windows, so I hope it will be distinguished like the previous shape.

Would this look okay for "Select all tabs"? image

zapSNH avatar Oct 21 '23 14:10 zapSNH

(less than 1px between star and border)

I think it's okay to be almost full (In fact, there are few margins of the bookmark toolbar, and it looks better than it is not distinguished)

This is because there are two icons in each svg. This is how it should look like if they were separate.

Thank you, it's separated so I think I can take it and use it if I need it.

Would this look okay for "Select all tabs"?

It looks good. It's much better than I imagined!! :heart_eyes:

After solving the #799 bug tomorrow(There is a slight amount to modify), I'm going to apply the icon right away.

black7375 avatar Oct 21 '23 14:10 black7375

Here's the repo with all the icons optimized: https://github.com/zapSNH/lepton-icons/

zapSNH avatar Oct 21 '23 15:10 zapSNH

I'm happy to be able to close an issue that's been open for two years. Thanks @zapSNH !!

black7375 avatar Nov 19 '23 09:11 black7375