Server: Icon inconsistency

[pixelipo]

There seems to be a bit of an inconsistency regarding icons on Nextcloud. I can give a hand in cleaning that up, but some design guidelines would be useful.

Opacity

• is the opacity: 0.5; default ? If so, it shouldn't be defined in the SVG (example here, but globally in the (S)CSS.
• should icons go opacity: 1; on hover/focus?

Color

• default color is black (no default fill in svg)? Some icons seem to use different shade of grey. Should that be fixed?

Size

• I figured 16x16 is the default size; so why is star.svg larger (22x22)?
• application icons are displayed at 20x20 in the #appmenu, 16x16 in the nav (mobile), but have original size of 32x32. Which one should it be?
• should there be margin around icons inside svg? Most (all?) icons seem to feature this, but is it really a good idea? We think we are showing 16px-wide icon, but in reality path might be only 14 or 12px wide
• should icons try to be square and if not possible, should they fit width or height to some predefined size (e.g. 12px is 2px margin in svg, or 16px if no margin)?

Target

• what is the default target size of a button? This is important from the mobile point of view. Predominant heigh seems to be 44px, but some have 36 (notifications icon in header), 38 (search button) 40, 45, 49 (.fileactions) or 50. Any rules to follow?

TO DO

• [x] optimize remaining actions icons #7130
• [x] optimize categories icons #7194
• [x] optimize filetypes icons #7194
• [x] optimize places icons #7188
• [x] optimize 'files' icons #7188
• [x] optimize remaining icons #7209

OPTIONALLY:

• [x] remove *-big.svg and user-*.svg icons #7236
• [x] unify share.svg and shared.svg https://github.com/nextcloud/gallery/pull/331
• [ ] unify settings.svg and settings-dark.svg
• [ ] unify star.svg and star-dark.svg
• [ ] move toggle.svg opacity to CSS
• [x] move shadows to CSS [ #nextcloud/gallery ] #7247 #7319 https://github.com/nextcloud/gallery/pull/331 https://github.com/nextcloud/spreed/pull/509
• [ ] add documentation
• [x] larger close.svg icon #7239

[ChristophWurst]

but some design guidelines would be useful.

Summoning our designers @nextcloud/designers for input :)

[jancborchardt]

Hey @pixelipo, awesome! Yes, help on making those standardized would be appreciated of course. :)

• Opacity & color: Yes, the icons should exist in black (and white where needed inversed), and opacity should be done by CSS. The default opacity is .5 but might need adjustment in specific cases.
• Size: 16x16 is the default size for action icons as that can be scaled up to anything. The app icons are 32x32 but mostly work on a grid of 16x16 anyway. The margin on some icons is important to make them all visually equal. A square icon fitting the entire size will look heavier/larger than a round icon, hence the square one is minimized in size a bit. It’s best to look at existing icons for this, as especially the app icons and filetype icons are good examples of how to balance wide icons, high icons, square or round icons.
• Target size: The clickable target size should be a minimum of 44x44px (achieved through padding), according to Apple Human Interface Guidelines. In some cases it’s bigger, for example in the header or in the file actions row so they fill the height of the row. It should never be smaller though and probably we should introduce that min-width and min-height in the CSS somehow – which will need to be well-tested though. :)

[pixelipo]

that's what I was hoping to hear, @jancborchardt !

If someone can add me to the team, I can assign myself to this issue and prepare a pull request.

[jancborchardt]

@pixelipo Btw, do you use any optimization besides the SVG line in build/image-optimization.sh? If so, it would be good to document that.

And also, probably the things we talk about here we should maybe move some of it to a more permanent place in the icons part of the design documentation? https://docs.nextcloud.com/server/12/developer_manual/design/icons.html like below the icons, so we can refer to it. cc @skjnldsv

[skjnldsv]

Completely agree! :)

[skjnldsv]

@pixelipo any news?
You might be interested in #9984

[MorrisJobke]

Most likely nothing for 14 -> moving to 15.