Unify icon design langauge #213

ildiem · 2021-09-07T22:39:50Z

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.

black7375 · 2021-09-08T08:34:12Z

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.

Firefox-UI-Fix/icons/arrow-sort-down-lines.svg

Line 1 in 64c7eee

    
           <svg width="16" height="16" viewBox="0 0 16 16" fill="context-fill" fill-opacity="context-fill-opacity" xmlns="http://www.w3.org/2000/svg">

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.

latere-a-latere · 2021-09-09T14:32:48Z

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

black7375 · 2021-09-10T00:24:53Z

Icon classification

1. Browser built-in icons

Issue

thickness is not uniform: 4px => 2.5px

Target Icons

2. Photon Icons

Issue

thickness is not uniform: 4px => 2.5px

Source

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.

https://github.com/microsoft/fluentui-system-icons [show icon list]

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

Nomes77 · 2021-10-18T16:20:44Z

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

black7375 · 2021-10-18T21:17:34Z

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!!

zapSNH · 2023-10-20T02:07:13Z

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)

black7375 · 2023-10-20T15:18:09Z

@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. #33 (comment)
There was an opinion that the original folder icon is close to a square, so it is difficult to recognize.

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

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

black7375 · 2023-10-21T12:59:00Z

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.

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

2. Tab

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

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.

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

Maybe there are the next icons.

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.

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

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

3. Bookmark toolbar

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

4. Clockwise

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

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.

6. Clipboard

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

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

In other icons, it feels like it looks appropriate.

Broken arrow

It appears to be disconnected.

7. Dictionary

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.

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

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)

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.
The third is that we select all the tabs of Windows, so I hope it will be distinguished like the previous shape.

10. Tag

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

11. Gift box

The string of the gift box should be connected

(https://www.indiamart.com/proddetail/handmade-explosion-gift-box-22417871112.html)

zapSNH · 2023-10-21T14:28:25Z

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.

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
have bookmarksToolbar-open be almost indistinguishable from the regular icon

Broken arrow

It appears to be disconnected.

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

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

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"?

black7375 · 2023-10-21T14:55:30Z

(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!! 😍

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

zapSNH · 2023-10-21T15:13:12Z

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

black7375 · 2023-11-19T09:34:17Z

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

ildiem added the Issue::Enhancement New feature or request label Sep 7, 2021

black7375 added the Class::Icon Icon for panels, menus, libraries label Sep 8, 2021

black7375 added the good first issue Good for newcomers label Sep 8, 2021

black7375 added the Issue::Help-Wanted Extra attention is needed label Sep 17, 2021

black7375 added a commit that referenced this issue Oct 17, 2021

Fix: Icons - Name as fluent design #213

eed21f6

black7375 added a commit that referenced this issue Oct 20, 2021

Fix: Icons - Fluent icon's size with padding #213

0b038d9

black7375 added a commit that referenced this issue Oct 21, 2021

Fix: Icon - padding, viewbox #213

188a44f

black7375 mentioned this issue Nov 8, 2021

Ver 4.5 Plan #203

Closed

31 tasks

black7375 mentioned this issue May 12, 2022

UI Icons Blurry, Just Like Chromium #392

Closed

black7375 pinned this issue May 12, 2022

black7375 mentioned this issue Oct 28, 2022

Consistent icons #496

Closed

black7375 added a commit that referenced this issue Apr 25, 2023

Fix: Icons - Replace to acorn icons #213

d0d15be

black7375 mentioned this issue Oct 22, 2023

Improve icons #802

Merged

4 tasks

black7375 closed this as completed Nov 19, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Unify icon design langauge #213

Unify icon design langauge #213

ildiem commented Sep 7, 2021

black7375 commented Sep 8, 2021

latere-a-latere commented Sep 9, 2021

black7375 commented Sep 10, 2021 •

edited

Loading

Nomes77 commented Oct 18, 2021 •

edited

Loading

black7375 commented Oct 18, 2021

zapSNH commented Oct 20, 2023

black7375 commented Oct 20, 2023

black7375 commented Oct 21, 2023

zapSNH commented Oct 21, 2023 •

edited

Loading

3. Bookmark toolbar

black7375 commented Oct 21, 2023 •

edited

Loading

zapSNH commented Oct 21, 2023

black7375 commented Nov 19, 2023

Unify icon design langauge #213

Unify icon design langauge #213

Comments

ildiem commented Sep 7, 2021

black7375 commented Sep 8, 2021

Info

Known issues with current icons.

When working

Icon post-processing

latere-a-latere commented Sep 9, 2021

black7375 commented Sep 10, 2021 • edited Loading

Icon classification

1. Browser built-in icons

2. Photon Icons

3. Fluent Icons

Nomes77 commented Oct 18, 2021 • edited Loading

black7375 commented Oct 18, 2021

zapSNH commented Oct 20, 2023

black7375 commented Oct 20, 2023

black7375 commented Oct 21, 2023

Feedback

1. Folder

2. Tab

3. Bookmark toolbar

4. Clockwise

5. Tablet

6. Clipboard

7. Dictionary

8. Password Field

9. Duplicate window & Select all tab

10. Tag

11. Gift box

zapSNH commented Oct 21, 2023 • edited Loading

3. Bookmark toolbar

black7375 commented Oct 21, 2023 • edited Loading

zapSNH commented Oct 21, 2023

black7375 commented Nov 19, 2023

black7375 commented Sep 10, 2021 •

edited

Loading

Nomes77 commented Oct 18, 2021 •

edited

Loading

zapSNH commented Oct 21, 2023 •

edited

Loading

black7375 commented Oct 21, 2023 •

edited

Loading