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

• optimize remaining actions icons Optimize SVG icons #7130
• optimize categories icons Re-optimize filetype and category icons #7194
• optimize filetypes icons Re-optimize filetype and category icons #7194
• optimize places icons Re-optimize places and files icons #7188
• optimize 'files' icons Re-optimize places and files icons #7188
• optimize remaining icons Re-optimize and clean up settings, social and logo icons #7209

OPTIONALLY:

• remove *-big.svg and user-*.svg icons Remove unused, deprecated icons #7236
• unify share.svg and shared.svg Remove svg shadows gallery#331
• unify settings.svg and settings-dark.svg
• unify star.svg and star-dark.svg
• move toggle.svg opacity to CSS
• move shadows to CSS [ #nextcloud/gallery ] Give audio-white and audio-off-white shadow via CSS #7247 Remove svg shadows #7319 Remove svg shadows gallery#331 Remove svg shadows spreed#509
• add documentation
• larger close.svg icon Make close icon fill more space #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.

[szaimen]

Since all necessary TO DO points are done, I am going to close this issue. Please open new issues or PRs with specific pointers to icons that still need to be fixed.