Unify icon design langauge

[ildiem]

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]

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]

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

[black7375]

Icon classification

1. Browser built-in icons

Issue

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

Target Icons

• 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

• command-frames.svg
• command-responsivemode.svg
• container-openin-16.svg
• movetowindow-16.svg
• password-hide.svg
• performance.svg
• pin-tab.svg
• quit.svg
• restore-session.svg
• send-to-device.svg
• sign-out.svg
• toolbar.svg
• unpin-tab.svg

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

• arrow-repeat-all.svg
• arrow-sort-down-lines.svg
• broom.svg
• bug.svg
• checkmark-circle.svg
• code.svg
• copy-select.svg
• developer.svg(Wrench Filled)
• dismiss-filled.svg
• folder-open.svg
• folder.svg
• image.svg
• link-square.svg
• paste.svg
• play.svg
• screenshot.svg
• search-file.svg (Document Search)
• star-line-horizontal.svg
• text-sort-ascending.svg
• video-clip.svg
• video-snapshot.svg
• webdeveloper.svg (Window Dev Tools)

Target Icons - thickness, not 16x16

• arrow-swap.svg: 20x20
• book-add.svg: 20x20
• book.svg: 20x20
• calendar-agenda.svg: 20x20
• content-view.svg: 20x20
• document-css.svg: 24x24
• document-endnote.svg: 24x24
• document-landscape-split-hint.svg: 20x20
• eye-hide.svg: 20x20
• eye-show.svg
• image-add.svg: 24x24
• image-alt-text.svg: 20x20
• image-arrow-counterclockwise.svg: 24x24
• image-copy.svg: 24x24
• key-multiple.svg: 20x20
• mail-inbox-all-big.svg: 24x24
• mail-inbox-all.svg: 24x24
• mail-inbox-big.svg: 24x24
• password.svg: 24x24
• resize-image.svg: 24x24
• resize.svg: 20x20
• select-all-on.svg: 24x24
• tab-copy.svg(Notebook Subsection): 20x20
• tab-multiple.svg: 20x20
• text-direction-horizontal-ltr.svg: 20x20
• text-number-format.svg: 20x20
• text-proofing-tools.svg: 20x20
• time-picker.svg: 24x24
• toolbox.svg: 24x24
• video.svg: 24x24

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]

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]

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]

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]

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

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.

2. Tab

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

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.

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

Maybe there are the next icons.

2. 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

1. 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.

2. Broken arrow

It appears to be disconnected.

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.

2. 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]

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
  

---

2. 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]

(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]

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

[black7375]

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