Microsoft Fluent UI System Icons

https://github.com/microsoft/fluentui-system-icons

by tosh • 6 years ago

182 99 6 years ago

lostgame• 6 years ago

Huh. These are aesthetically pleasant, multi-platform, and easily-integratabtle. I'm interested in using this for future projects.

trilinearnz• 6 years ago

Agreed. They are much 'cuter' and approachable than the recent geometric icons used by MS. Still a ways to go (especially with the smileys), but I like their direction.

echelon2• 6 years ago

At first I was disappointed to see that there wasn't a floppy disk for save, but upon viewing the full icon set, it's indeed still present (`save20Regular`, etc.) :

https://github.com/microsoft/fluentui-system-icons/blob/mast...

I love that the floppy disk persists as our visual metaphor for the concept of "saving". It's a wonderful remnant of a dead technology that I hope persists well into the future.

If language can behave that way ("hang up" and "dial" are popular anachronisms), then so should visual indicators. I'm always happy to see Atari Pong joysticks and SNES control pads used for video game icons.

topspin2• 6 years ago

Yes it's amusing but the floppy disk metaphor is about three technological phases out of date. It's as if a magneto crank were offered to represent "call."

I point that out to ask this: why hasn't a better, more general icon representing the concept of persisting something emerged? I've seen many attempts (various arrows with lines and whatnot,) but they don't stand alone very well. Certainly not as well as a crummy old floppy disk icon (at least for those that know what they looked like.) It's as if as soon as we began using something we couldn't detach and hold in hand we ceased being able to represent what was happening.

adolph4• 6 years ago

Iconography can work outside the context in which it arose when it is sufficiently ubiquitous and new users learn it as an abstract shape instead of a nmemonic for the physical world.

I think that the 3.5 diskette will have staying power since the trend in applications is to constantly persist. The icons needed have shifted to SCM-like commit, branch, fork, diff, merge, revert. However, these are conceptually very abstract compared to "Save."

Etheryte• 6 years ago

The main benefit here is not in how accurate the metaphor is today, but how consistently it is used. Save looked roughly the same in the 90s as it does today, across operating systems, across applications, and it's instantly recognizable. Perhaps what's a good comparison is traffic signs: no entry has very little metaphorical meaning but it's universally known and understood.

bluedevil2k• 6 years ago

I’ve started using the cloud icon with an arrow for save (fa-cloud-upload), implying “this information is being uploaded to the cloud”. No complaints.

Izkata• 6 years ago

but the floppy disk metaphor is about three technological phases out of date. It's as if a magneto crank were offered to represent "call."

The phone icon used everywhere depicts a corded type (without the cord) that was last popular in the 90s. After that there was a wireless version, then flip-phones, then smartphones.

So actually about the same number of iterations out of date.

usrusr• 6 years ago

why hasn't a better, more general icon representing the concept of persisting something emerged?

Icons are good at representing objects but terrible at representing behavior over time unless it's simple directional movement. How would you symbolize something like the concept of persistence? "Data that can be retrieved unchanged in the future"? A pen, a clock with progression arrows on the hands, and reading glasses? Surely not if there's already an established convention available. The floppy disk happens to be that convention, as the last object that was unambiguously connected to local storage (an optical disk would be ambiguous for recorded music consumption, HDD were supposed to be invisible to the regular user and USB sticks could just as well be any of a variety of radio interfaces in the same form factor). So floppy disk it is. And it's not a problem at all that the convention, once established, is now used by generations that have never seen a floppy, it's just visual language to them. Complaining about the lack of connect between that language and the life realities of it's users seems to me as pointless as complaining that the word dog does not sound like barking at all (why not whoofwhoof?) or that the word hammer does not sound like the noise of hammering (why not banger?).

And still, the floppy disk icon is in decline, because applications that eschew local storage tend to use the "arrow up to cloud" icon. Another convention that has absolutely nothing to do with what is actually going on (few datacenters are actually hidden in clouds)

adolph4• 6 years ago

I looked for this too. Also happy to see the wired phone handset (ie phone16Regular) and metal trash can (ie delete16Regular).

vnxli• 6 years ago

Same thing. Went digging for the save icon - interesting that the continuous save feature drops the floppy icon. I think as we move to more cloud hosted documents and stuff we'll see floppy drop out for some looped paper kind of thing. I hope the visual language of a floppy sticks around forever

hyakosm2• 6 years ago

The 3.5" floppy disk is easy to draw and recognize. Today we save documents on mechanical drives, SSDs, USB devices, cloud... As a way to represent the "save" action, the only alternative to floppy is an arrow and a square, or an arrow and a cloud. It's imprecise and vague. The floppy disk is still a strong metaphor.

ashleyn• 6 years ago

It's kind of the same reason people will call something a "tape" when they mean a "audio/video recording". Or they "wire" you money. Or that welfare is paid with "food stamps" (it actually comes on a card now).

Certain legacy methods and technologies just carry on in the vernacular because it's easier to make analogies to them long after they become obsolete.

kristopolous• 6 years ago

When someone invents a more reasonable abstraction I'm sure its days are numbered.

We still use removable disk packs to represent databases

Ultimately symbols are arbitrary which is why we have hundreds of languages. As long as they're unique and distinct it works

s9w2• 6 years ago

They're good for marketing and a manager because there's a number of nice adjectives about them. "modern", "minimalistic" etc. They're bad for users - because they all look the same and lack color as well as shading.

dubcanada• 6 years ago

What does colour or shading have to do with an icon?

Does it being colourful or having shadows impact the representation?

I don't think colour or shading has any impact on the icon. I think proper accessibility by labelling said icon is 100% more important then anything else, unless it's a universally understood symbol (such as floppy disc for saving).

noworriesnate• 6 years ago

When I'm quickly trying to find a bookmark, it's easier for me to find the ones with distinctive colors. I've actually rearranged my bookmarks toolbar at times just to get better separation between similarly-colored favicons. So IME there is a singificant advantage to having memorable colors to the icons; they're easier to find.

s9w2• 6 years ago

The point of icons is to recognize them. These icons are insanely similar to each other, which is in direct opposition to that original goal.

A similar disaster were the new gimp tool icons:

https://www.gimp.org/release-notes/images/2.10-icon-themes.p...

They actually brought the old ones back as an option.

UI_at_80x24• 6 years ago

I feel like things have consistently gotten worse from a UI perspective since Windows2000. Every aspect of the interface including the icons are harder to understand. It's hard to describe, but them seem to lack context.

I get what the point is (i think). Symbols like we see that indicate male vs female gendered bathrooms, the 'Handicap parking' and others allow everybody (and i hope all/most cultures) to instantly recognize what is being depicted. I would be hard pressed to guess what half of these are trying to represent.

roywiggins3• 6 years ago

Symbols like we see that indicate male vs female gendered bathrooms

That we recognize a gendered stick figure on a door to mean "this is a toilet" is not less arbitrary than the "WC" signs you see in Europe, which at least have some meaning ("water closet", olde timey for "toilet")

Aardwolf• 6 years ago

I hope there will appear a trend where icons use different colors again after this particular trend blows over.

Especially in painting programs where one should be able to be really productive I don't understand why they made the icons less distinguishable in this "remove all the colors" trend.

noir_lord• 6 years ago

At least in gimp and Inkscape you can restore the old colourful icons.

dragonwriter• 6 years ago

I think the current trend is for generic icon sets to be monochromatic or two-tone with the idea that the system applying them will apply one or two color(s) to them based on the semantics of their use and immediate context in the app plus the apps theming, rather than that they will be presented in end products without color.

qz22• 6 years ago

This whole thing isn't going to blow over until we have science fiction movie special effects foldable transparent displays with completely useless user interfaces that were designed by someone who doesn't have to use them daily but is suitably impressed by them anyway. (Think The Expanse)

It was all down hill after windows 2000. Every visual cue in user interfaces such as depth, separation, colour, accelerator underlining and consistency is gone. I feel like I'm stroking a hairless, cold and thoroughly deceased cat most of the time.

I suspect, much like most aspects of the human race, that the improvement will only come after a shitty UI causes an actual body count via some ambiguity. The post-mortem for those poor souls will be a couple of paragraphs in comp.risks digest.

roywiggins3• 6 years ago

A loud clatter of gunk music flooded through the Heart of Gold cabin as Zaphod searched the sub-etha radio wave bands for news of himself. The machine was rather difficult to operate. For years radios had been operated by means of pressing buttons and turning dials; then as the technology became more sophisticated the controls were made touch-sensitive--you merely had to brush the panels with your fingers; now all you had to do was wave your hand in the general direction of the components and hope. It saved a lot of muscular expenditure, of course, but meant that you had to sit infuriatingly still if you wanted to keep listening to the same program.

http://www.technovelgy.com/ct/content.asp?Bnum=1329

kevin_thibedeau• 6 years ago

I'd lay the blame on Kai's power tools and their silly opaque discoverable interfaces. That's the start point of usability taking a back seat to designer bs.

brundolf3• 6 years ago

Part of it may be technical. High-res, colored PNG icons a) are heavyweight, b) require you to ship multiple sizes, c) if you don't have a large enough version for a new display resolution it'll look blurry. This adds both process complexity and implementation complexity.

Vectorized icons on the other hand take up much less memory and can auto-scale to different displays and use-cases. If you take it a step further and ship them as a font - which is the gold-standard these days - they can be stored even more compactly and worked with very easily on the web and otherwise, and can even be re-colored dynamically. But of course a font can only be rendered in one color at a time.

mawise• 6 years ago

Vector graphics can have colors...

nyanpasu64• 6 years ago

Vectorized icons on the other hand take up much less memory and can auto-scale to different displays and use-cases.

In the absence of grid-fitting and hinting, monochrome vector icons are just as mediocre at scaling to arbitrary sizes as colored vector icons. However, I think one "advantage" is that fuzzy monochrome borders look less bad than fuzzy outlined borders.

TTF bytecode supports grid-fitting and hinting (I believe SVG doesn't support it), and it would be interesting to see that applied to rescalable icons. However, you'd have to turn off subpixel antialiasing.

duckmysick• 6 years ago

Is the trade-off worth it? Is saving developer time worth more than saving user time?

chrismorgan2• 6 years ago

Fonts are not the gold standard. They have some advantages (mostly convenience of bundling) and some disadvantages (reliability/compatibility, and functionality). One of the disadvantages is that they’re much more likely to simply not load—fonts are supposed to be optional, and most browsers have a “don’t use the fonts the web page specifies, use my own set of fonts” setting. And the other huge disadvantage is that you’re mostly limited to monochrome icons (styleable multi-coloured text support in the one file is somewhere between non-existent and patchy, can’t remember exactly where). Overall, I’d consider one of the inline SVG variants to be the gold standard in terms of functionality and compatibility, though optimal developer ergonomics require some sort of build tool.

pcurve• 6 years ago

I think Mac's old System 7 was the gold standard for effective icon design.

https://guidebookgallery.org/pics/gui/settings/menu/macos70....

Even after it grew in numbers, I never had difficulty finding things just based on visual alone.

https://forums.macrumors.com/attachments/classic-mac-os-1994...

vizzier• 6 years ago

Why do some have horizontal bars, and some vertical? And if it is meaningless, why is it part of the icon?

thiht• 6 years ago

I'd say that's nostalgia talking. These are awful.

Also don't underestimate your visual memory, most of these don't mean anything to me compared to the "bad" icons of today.

pseudosavant• 6 years ago

I've used these icons quite a bit. If you use the SVGs they are made in such a way that you can color them quite a bit just using CSS. I haven't used any of them in the default colors.

prox• 6 years ago

At least for creative programs it is better not to have any color, as this might alter color perception on your current work. But for other type of apps this might not that big of an issue.

fogihujy• 6 years ago

Don't worry. This is pretty much 80's retro-style monochrome icons that have been modernized. In 5-10 years, we'll be stuck with whatever the re-invention of 90's multi-media UI's (Kai's Power Goo etc) will result in, and we'll be looking back at this and laugh.

mrguyorama• 6 years ago

What the heck is wrong with color? With nicer icons? We finally have really really nice screens and displays and a bunch of designers have made unilateral decisions to replace the joy and beauty of a well designed UI with utter, boring conformity and lack of imagination

Google recently changed all their app's icons to just letters, with a similar (identical?) coloring. Now instead of my email app looking like a clearly defined message icon, it's "M". Thanks Google

read_if_gay_• 6 years ago

Those aren’t exactly app icons though. They’re more like buttons, and I actually like buttons having a uniform look. It helps consistency and declutters interfaces.

toper-centage• 6 years ago

I partially agree, but it's also about versatility. Icons should be recognisable is a multitude of sizes and themes. The problem is that simpler icons have a steeper learning curve. Less tech savy people can't possible understand what many, or even most icons are supposed to mean. The app im typing this right now has a sort of paper plane icon on top. When did paper planes become "send"? My parents would certainly miss that metaphor.

dheera5• 6 years ago

When did paper planes become "send"?

I guess it was the standard instant messaging system in grade school?

dheera5• 6 years ago

I'm seeing this too. The new GIMP icons are monochrome and also utterly unusable.

This stuff reminds me of mid-1980s monochrome Macintosh icons.

nine_k3• 6 years ago

The new Gimp icons are fine for experienced users (like myself) who only need a faint pointer to the function if the tool. I use shortcuts for most of them anyway.

But users who are only starting to learn the ropes the classic big and colorful icons are a serious help. They are still available, just not made the default.

RedShift1• 6 years ago

And let's not forget, we all have high resolution displays and what do we use it for? Whitespace.

naikrovek3• 6 years ago

So many pixels are wasted on the goofy super magnified trends of today. I really wish we weren't so wasteful of screen space, most of the time.

I'm not saying that we should all aim for maximum information per pixel or anything, just that we not be wasteful like what I've seen recently. It's maddening.

causality0• 6 years ago

Because marketers have to justify their own jobs, and doing so involves promoting change for the sake of change. Frankly I'm amazed they're still breathing oxygen and not methane, having an oxidizing metabolism is so 90s.

Someone• 6 years ago

The argument for restricting the use of color/animation/sound in UI elements is that you don’t want to have the icons distract from the content.

The problem with that is that, sometimes, the user is looking for UI elements. I don’t see us build an AI that detects that and makes icons more colorful/distinctive (and don’t even know whether that would be a good idea), so I guess the ideal is somewhere in-between: icons that are neither too bland nor too colorful.

hyakosm2• 6 years ago

In Windows 95-98, toolbar icons were grayscale until you hover on them. It was a good idea.

p1necone• 6 years ago

This justification makes no sense to me. Icons aren't window dressing, they serve an actual functional purpose (identifying things that you can click on to perform actions). Removing color and making them all look similar makes them worse at their intended functional purpose.

formerly_proven• 6 years ago

I have to admit these look really quite shitty.

myoon• 6 years ago

If this https://github.com/microsoft/fluentui-system-icons/issues/52 is addressed, then at least any developer can choose to set their own fill colors.

Memosyne• 6 years ago

If you have colorful icons you'll need to duplicate the resources to account for light and dark variants unless you prefer sub-optimal legibility. If you emphasize color as a method of representing state you'll need to adjust by shipping images for each state value. With monochrome icons the emphasis is placed on shape so you can efficiently render the whole icon in a different color without obfuscating its meaning.

zaphirplane• 6 years ago

Published to flutter pub.dev, edge switching to chromium was shocking. I think google and Microsoft are courting

CognitiveLens• 6 years ago

I agree with some other commenters that these are very pared-back icons, but I don't see that as a bad thing - they might not be quite right to use as-is for many projects, but they're a great starting point that a design system could use to build out from.

If the starting point has too much personality, it becomes very hard to integrate with existing designs and risks making everything using this icon set look like everything else using this icon set.

2bitencryption• 6 years ago

MIT license -- swoon

athenot• 6 years ago

The pendulum has swung full opposite from the skewmorphic trend in the early 2000s. Now it's all about abstract shapes for UI buttons, and abstract color blobs for app icons.

nvrspyx3• 6 years ago

I think a lot of people are missing a major point: they specify mobile and macOS. Monochrome UI icons are the norm on those platforms and they're trying to conform to the designs of those systems. Fluent UI is meant to be cross-platform so that your UI looks like it "belongs" regardless of platform. They're not making some kind of UX/UI design statement or illustrate some philosophy with this repo specifically (although Fluent UI as a whole could be argued as such), they're just providing a freely available set of icons that may make sense for your particular project, like Font Awesome.

azinman2• 6 years ago

But then if that’s the case, should it point to sf symbols where appropriate on the Mac? This set looks basically like sf symbols already.

nvrspyx3• 6 years ago

Not if you want your UI to look the same across platforms, but still look like it "fits" in wherever. One is free to use SF symbols specifically on Apple devices if they want, or if they want it to look the same on Android, Apple devices, web, etc. they can use these icons (or some other icon library).

There's room for both "stock" icons and alternatives.

yagodragon• 6 years ago

It's very interesting they made a flutter version and not JS

skee0083• 6 years ago

Flat ugly colorless garbage.

corytheboyd• 6 years ago

Unpopular opinion I guess, but I think they look great. At work we maintain a Fluent UI based Outlook Add-in and I gotta say, I now much prefer it over say Material UI.

wenc• 6 years ago

I like these. They remind me of the bitmap icons on the original Macintosh, designed by Susan Kare. It's astounding how much fun and whimsy manages to come through on a 16x16 or a 32x32 B&W grid.

https://99percentinvisible.org/article/designed-with-kare-in...

drummer• 6 years ago

No support for Windows apps yet in the repo. Incredible.

duxup• 6 years ago

They look good.

No web option?

Edit, found them:

https://developer.microsoft.com/en-us/fluentui#/styles/web/i...

blackoil• 6 years ago

I for one, like monochrome icons, this allows me to add color based on context and theme. So the icons now also take primary, default and warning color as defined in the theme.

szszrk• 6 years ago

I wish Microsoft actually used such icons on their websites, instead of screwed up fonts that don't work on Linux. I have to add microsoft fonts to my linux and it still doesn't work, as some languages don't have all those characters...

So things like outlook.com or onedrive.com look like garbage and you can't really use the menus like a normal person.

alkonaut• 6 years ago

Do people really manage to do anything useful with these icon sets, or do you end up having to craft your own to mimic these? I find that I can do the generic add/zoom in/copy/settings/blah and then when I need buttons for "Show wiring" and "Set milking schedule" or "View restaurants" then it's tricky to use an icon, but too time consuming to try to create a new one. The usual antipattern is "OK I'll use this lightning one as a placeholder to mean do-thing, and I'll create a better one later". That never happens, so you have these monochrome overly generic icons around.

Microsoft Fluent UI System Icons

Related Stories