System UIcons – icons designed for products, no attribution(systemuicons.com)
systemuicons.com
System UIcons – icons designed for products, no attribution
https://systemuicons.com/
86 comments
This project actually started because of that haha. I've started off with a mix of obscure and commonly used icons, but I've got another 200 coming soon, and will continue to make more.
I'm also setting up the site with a request option. Just wanted to get the project out otherwise it'd never get out :)
Is there anything that you're currently after? Will try and sneak it in to the next release.
I'm also setting up the site with a request option. Just wanted to get the project out otherwise it'd never get out :)
Is there anything that you're currently after? Will try and sneak it in to the next release.
you could always bribe the author, I hear he's a nice guy :)
worst case you might end up paying some other designer to supply the icon you need in the desired style. shouldn't break the bank, "especially for a big product".
worst case you might end up paying some other designer to supply the icon you need in the desired style. shouldn't break the bank, "especially for a big product".
Can confirm that I'll listen (no bribe necessary) haha. It's going to take a while to knock off every icon, but we'll get there.
I use materialdesignicons.com
If I don't have a necessary icon, I just draw one, and contribute it to them.
The only problem is that Google lately seems to have abandoned nice simple material icons in favour of rather ugly outlined icons. Their current design with this fat new font is way worse than it was when Material Design was introduced in Android 5.0
If I don't have a necessary icon, I just draw one, and contribute it to them.
The only problem is that Google lately seems to have abandoned nice simple material icons in favour of rather ugly outlined icons. Their current design with this fat new font is way worse than it was when Material Design was introduced in Android 5.0
So what do you do, design every icon you need yourself?
I use noun project or flaticon. Though in order to get full advantage you got to pay. So yeah, I'm actually looking through tons of icons trying to find some with similar styling
Thanks, I love me some icons. Looks like it could work well stylistically along side those also using Github's recently redesigned octicons (https://primer.style/octicons)
That's pretty cool! Thanks!
Please though, if you ever use these (or any icons, frankly), PLEASE accompany the icons with text so my aging parents -- and heck, me too -- know what they mean.
All too often I am helping my family members navigate UIs that are "clean" yes (plenty of whitespace! too much) but with icons that hide everything and don't mean anything.
"Oh, to send it to your daughter? Click the 3 lines in the top right corner, then click the two lines joined by a circle. Er, the one that looks like a chart. Yeah, that means 'share' apparently. You just have to know that."
I kind of miss the days when software didn't change so much and came with instruction manuals.
All too often I am helping my family members navigate UIs that are "clean" yes (plenty of whitespace! too much) but with icons that hide everything and don't mean anything.
"Oh, to send it to your daughter? Click the 3 lines in the top right corner, then click the two lines joined by a circle. Er, the one that looks like a chart. Yeah, that means 'share' apparently. You just have to know that."
I kind of miss the days when software didn't change so much and came with instruction manuals.
The symbols are pretty standardized these days. I am always perplexed on the rare occasion I encounter a physical radio, but I wouldn't ask them to waste space by adding text to the buttons! On the web, hover text is probably good enough.
For the love of everything that is holy, if in your design the icons for "Undo" and "Jump Backwards" are practically identical -- as in this font, where only the outline of the arrows differs -- , please, please "waste space" by adding text to the buttons.
Don't make people discover which one's "undo" and which one's "discard the current screen" by trying the buttons out. That's not a friendly interface. An interface can be friendly without looking like a five year-old's doodle. A wall of text is intimidating and unfriendly, sure, but nobody older than eight is intimidated by having to read six or seven words.
Don't make people discover which one's "undo" and which one's "discard the current screen" by trying the buttons out. That's not a friendly interface. An interface can be friendly without looking like a five year-old's doodle. A wall of text is intimidating and unfriendly, sure, but nobody older than eight is intimidated by having to read six or seven words.
Fair enough! I didn't look closely at this icon set, and definitely agree that we should strive for high-clarity icons if they're the only signal about what a button does.
To abuse a different saying, "Space wasted for clarity is not wasted space."
At least make it configurable.
At least make it configurable.
You would think so, but nope.
The last "bad luck" I had was with the Google Photos app, where they use a speech bubble icon for... sharing pictures. And there's no tooltip on it. It gave me a hard time finding out how to share a picture.
The last "bad luck" I had was with the Google Photos app, where they use a speech bubble icon for... sharing pictures. And there's no tooltip on it. It gave me a hard time finding out how to share a picture.
I don't see three lines but there are three dots in the top right corner...
Yes, text labels please or at least tooltips if on a desktop platform.
Here is an example for icons that are saved by their labels: the Windows 10 Mail app has a menu with two magnifying glass icons. One with the handle to the bottom left symbolizes search, one with the handle to the bottom right is for zooming. Now imagine that these would not have their accompanying text labels. ><
Yes, text labels please or at least tooltips if on a desktop platform.
Here is an example for icons that are saved by their labels: the Windows 10 Mail app has a menu with two magnifying glass icons. One with the handle to the bottom left symbolizes search, one with the handle to the bottom right is for zooming. Now imagine that these would not have their accompanying text labels. ><
A clever way that the Material Design icon font works is to define ligatures for all the icon names, so the text in the document is default readable by a screen reader.
This only helps when the icon is used for something relevant to its default name. I'm not sure how you opt-into a more descriptive name because some alt-text on the containing elements, ie <mwc-icon-button> has a label attribute for this.
This only helps when the icon is used for something relevant to its default name. I'm not sure how you opt-into a more descriptive name because some alt-text on the containing elements, ie <mwc-icon-button> has a label attribute for this.
That is clever for sure, but the comment replied to referred to not understanding the symbols, despite being able to see them.
It seems like when "UI" became "UX" is when that kind of design arrogance started to be more common.
UI never "became" UX, they are different but related with overlapping concerns. Typically a person doing User Interface work should have User eXperience considerations in mind. This is not a thing that changed, it's always been the case (even if there wasn't a name for it or it wasn't in common usage).
This isn’t new at all; it has been commonplace for decades. People have been complaining about this since at least 1998, when the term "mystery meat navigation" was coined:
https://en.wikipedia.org/wiki/Mystery_meat_navigation
https://en.wikipedia.org/wiki/Mystery_meat_navigation
Those 'phone' icons are the most generic things. Maybe useful to distinguish an iPhone vs iPhone X/11. If I was expecting anything other than a phone there's a 50:50 chance I could believe it was something else.
They are a bit confusing since now days the microphone tends to be on the bottom side of the phone and there is a notch of some type on the top.
My first thought was that the phone icon was upside down, camera notch goes on the top!
My first thought was that the phone icon was upside down, camera notch goes on the top!
> They are a bit confusing since now days the microphone tends to be on the bottom side of the phone
The microphone has been at the bottom side of the phone since they looked like https://www.ooma.com/wp-content/uploads/blog/2019/02/telepho... ?
My first thought was also that the phone was upside down though, and that the line was where they're usually a thing for speakers.
The microphone has been at the bottom side of the phone since they looked like https://www.ooma.com/wp-content/uploads/blog/2019/02/telepho... ?
My first thought was also that the phone was upside down though, and that the line was where they're usually a thing for speakers.
I meant the microphone grill itself is now on the bottom side, not even below the screen but on the actual thin edge.
Nokia phones from the 90s had that...
I remember those dark days when everyone was using a different icon for "share" and you never really knew what icon did what. The icons even changed across Android/iOS versions, and there was Microsoft in the corner tooting its own horn on Windows Phone.
I'm hardly tech illiterate, but the way apps use icons these days makes me almost go into "those darn kids" mode.
I'm hardly tech illiterate, but the way apps use icons these days makes me almost go into "those darn kids" mode.
> I remember those dark days when everyone was using a different icon for "share" and you never really knew what icon did what.
Is that not… today? Android is "a node splitting into two nodes", OS X is "leave the box". Neither scream "share" to me, especially when there's no text accompanying the hieroglyph.
Is that not… today? Android is "a node splitting into two nodes", OS X is "leave the box". Neither scream "share" to me, especially when there's no text accompanying the hieroglyph.
Mobile is such a stupidly confined platform for UX with its imprecise input constrained not only to boxes 1cm/1cm wide but also the lack of hover. They're crude approximations that fail to benefit from true human dexterity and simultaneously rob us of hover and other input signals that can be used to enrich the UX and show hints or provide context. And desktop UI designers scrambled over one another to throw out their rich and carefully designed UX paradigms to adopt a similar least common denominator for their user interfaces.
It's still like that. But at least we've come to some consistency across versions. iOS 5 and 6 had different icons. Android's icon would change with every new version in the early years. There's no Windows Phone anymore.
I mean, that's honestly really hard sometimes.
On mobile you very often simply don't have the space for text.
And if you say "well just make it a scrollable area for all the options" let me tell you, many people will never realize there are any further options to be scrolled to, especially if your phone's height randomly happens to make it so that the viewport area terminates between lines rather than in the middle of a line.
And just in case you say "well then you shouldn't have that many options, simple is better", you're probably wrong. The functionality is probably there because it's necessary for certain users.
I agree it's a little annoying to have to learn what the icons mean. But they're also awfully standardized at this point. There are a couple different common versions of menu and share and link, and occasionally the context doesn't clarify among search/find/zoom or back/undo... but otherwise it's pretty good. A gear icon always means settings, a person icon always means user/account, etc.
For real -- every computing environment has common conventions you just have to learn, whether Ctrl+Z/X/C/V, or pinch-to-zoom, or what the Apple logo is for in your menu. Icons aren't particularly worse here.
On mobile you very often simply don't have the space for text.
And if you say "well just make it a scrollable area for all the options" let me tell you, many people will never realize there are any further options to be scrolled to, especially if your phone's height randomly happens to make it so that the viewport area terminates between lines rather than in the middle of a line.
And just in case you say "well then you shouldn't have that many options, simple is better", you're probably wrong. The functionality is probably there because it's necessary for certain users.
I agree it's a little annoying to have to learn what the icons mean. But they're also awfully standardized at this point. There are a couple different common versions of menu and share and link, and occasionally the context doesn't clarify among search/find/zoom or back/undo... but otherwise it's pretty good. A gear icon always means settings, a person icon always means user/account, etc.
For real -- every computing environment has common conventions you just have to learn, whether Ctrl+Z/X/C/V, or pinch-to-zoom, or what the Apple logo is for in your menu. Icons aren't particularly worse here.
Even if there are no text, add tooltips.
The crazy part is that apps without descriptions and tooltips do not include help files.
The worst offenders are electron apps from devs who use Macs exclusively.
The crazy part is that apps without descriptions and tooltips do not include help files.
The worst offenders are electron apps from devs who use Macs exclusively.
How do tooltips on mobile? Discoverable tooltips?
If it’s a desktop, proper ui is a menu bar that has all the actions listed.
On touch platforms you’re out of luck though because those haven’t had 30 years to settle down yet.
On touch platforms you’re out of luck though because those haven’t had 30 years to settle down yet.
This, a thousand times.
My mom just got an android tablet. The material icons are extra cryptic.
Also, in some apps (looking at you, zoom), timed controls disappear way soon, before she can even orient herself and figure out what’s what.
It takes her 5 min to switch her camera on.
“Camera icon” means nothing because it’s too abstract. I say “square with a triangle next to it”.
The text which is sometimes available along icons is often tiny and next to impossible to read.
I’m wondering if in 20-30 years I will be struggling with interfaces streamlined for other generations.
My mom just got an android tablet. The material icons are extra cryptic.
Also, in some apps (looking at you, zoom), timed controls disappear way soon, before she can even orient herself and figure out what’s what.
It takes her 5 min to switch her camera on.
“Camera icon” means nothing because it’s too abstract. I say “square with a triangle next to it”.
The text which is sometimes available along icons is often tiny and next to impossible to read.
I’m wondering if in 20-30 years I will be struggling with interfaces streamlined for other generations.
Tiny inscrutable icons are a terrible design fad.
The solution isn't "yet another free icon collection"
The solution isn't "yet another free icon collection"
These do not have to be tiny as they are available as SVGs.
Just because a logo is a vector art doesn't mean you can just naively scale it up.
I'm aware, that's why I checked a few to make sure these actually scale well.
Normally when you make a logo bigger, you'll increase the level of detail, and tweak line widths.
Obligatory: https://www.youtube.com/watch?v=5AxwaszFbDw#t=17s
(aside: These guys sound like Deep #800080 don't they?)
(aside: These guys sound like Deep #800080 don't they?)
I don't know if this icon set provides this, but there's no reason SVG can't provide different levels of detail for different scaling factors.
Yes. Line art can be tough to scale properly.
I would prefer more usage of ISO 9995-7 symbols. They might be equally inscrutable, but at least they are an international standard.
As far as I'm aware, ISO 9995-7 only specifies symbols which would be used on or in relation to a keyboard -- glyphs representing functions like Shift, Control, Escape, Scroll Lock, etc. Useful if you're trying to describe keyboard shortcuts, useless if you're trying to describe a more concrete operation like "zoom in", "add a comment", or "delete this".
Keyboard keys have an extremely similar role to buttons in an application program.
And in unicode, to boot. Though, I'd calls them slightly less scrutable, as it were, than the ones presented here. Slightly.
What's the license? Are these in the public domain? And are the source files somewhere?
I've opened up the repo now (https://github.com/CoreyGinnivan/system-uicons), the licence is officially "Unlicense License" - it's all public domain. The SVGs are all in the repo (or can download on the site). I'll be releasing Sketch and Figma files soon :)
I'm curious about reasons you chose Unlicense
I like the icons, especially the bells, look cleaner than other fonts, to me
I like the icons, especially the bells, look cleaner than other fonts, to me
Thanks! I chose it because I want it to be public domain, people can copy, remake, improve, do whatever they want with it. Don't having to worry about any infringements.
Thank you!
Bottom of the page says:
""Use how you want, without attribution""
And they are SVG, the display is the source.
""Use how you want, without attribution""
And they are SVG, the display is the source.
[deleted]
Maybe it's just my particular setup, but these icons look blurry to me, especially when you mouse over them. It looks as if there is no antialiasing. I'm on Ubuntu with Firefox for whatever it's worth.
Other than that they look like nice icons and this is a nice effort.
Other than that they look like nice icons and this is a nice effort.
I'll look in to it, thanks mate! Might just be an image rendering issue when they're scaling
It’s your setup, those are svg icons so there should be no blur on any display.
Icons look pretty good, always grateful for free stuff like this.
Minor side: the first thing I typed into the filter box was "save" because I wanted to see how the designer thought about the whole "floppy disk == save" problem in a greenfield icon set. I thought it was even more remarkable (or just notable, I guess) that there's no Save icon at all, which really speaks to where the world is at around cloud-based web apps.
Why require someone to click Save at all, right?
Minor side: the first thing I typed into the filter box was "save" because I wanted to see how the designer thought about the whole "floppy disk == save" problem in a greenfield icon set. I thought it was even more remarkable (or just notable, I guess) that there's no Save icon at all, which really speaks to where the world is at around cloud-based web apps.
Why require someone to click Save at all, right?
> Why require someone to click Save at all, right?
Sometimes saving is a high latency operation.
Sometimes you don't want to show others data as it is being edited, think product data for an online story. Heck the "reply" button beneath the text box I'm typing into right now is a form of "save".
Paradigms matter! Saving was necessary for all disk IO for a long time due to technology limitations, but even now days it is still the appropriate paradigm for certain circumstances.
Sometimes saving is a high latency operation.
Sometimes you don't want to show others data as it is being edited, think product data for an online story. Heck the "reply" button beneath the text box I'm typing into right now is a form of "save".
Paradigms matter! Saving was necessary for all disk IO for a long time due to technology limitations, but even now days it is still the appropriate paradigm for certain circumstances.
> Sometimes you don't want to show others data as it is being edited, think product data for an online story.
In modern CMS workflows (used by e.g. newspapers), the software will auto-save draft versions; while you then explicitly publish particular versions (or, more likely, submit particular versions for the next stage of the pipeline, e.g. editing) by changing your latest version's state in a drop-down.
This process really has no analogy with saving per se. It's more like tagging a commit.
In modern CMS workflows (used by e.g. newspapers), the software will auto-save draft versions; while you then explicitly publish particular versions (or, more likely, submit particular versions for the next stage of the pipeline, e.g. editing) by changing your latest version's state in a drop-down.
This process really has no analogy with saving per se. It's more like tagging a commit.
Yes I agree that "draft" / "published" as a paradigm maps users' intentions better than "saved" / "unsaved", which is more like an implementation detail borrowed from apps exposing raw filesystem concepts.
Oh, I totally agree with you. I was just making an observation of the trend more than anything.
I'm someone who does everything that I possibly can while offline, and I'm mostly in the camp that the "Save" button being a floppy is not much different today than learning how to pinch-to-zoom or click a mouse (i.e. there's an up front cost to learning it, but it's already ubiquitous, so why change)
I'm someone who does everything that I possibly can while offline, and I'm mostly in the camp that the "Save" button being a floppy is not much different today than learning how to pinch-to-zoom or click a mouse (i.e. there's an up front cost to learning it, but it's already ubiquitous, so why change)
Thanks mate!
I've still got quite a few icons to release in batches. One is a floppy disk, but it won't be labelled as "Save" :D
There's a few options to take, but these days it mostly comes down to the context of what you're saving, rather than the action itself.
"Save Document", "Save Template", etc
I've still got quite a few icons to release in batches. One is a floppy disk, but it won't be labelled as "Save" :D
There's a few options to take, but these days it mostly comes down to the context of what you're saving, rather than the action itself.
"Save Document", "Save Template", etc
As i see it, modern OSs are trying to remove the idea of “saving”, which confuses most of non techies and it is actually obsolete most of the time.
I still Ctrl+S automatically though:(
I still Ctrl+S automatically though:(
> Why require someone to click Save at all, right?
It's like the 'close door' button on an elevator. Some people just want to feel like they are doing something.
It's like the 'close door' button on an elevator. Some people just want to feel like they are doing something.
The elevators I encounter daily have a working close button, are there ones that don't work?
Many elevators have placebo ones. It might behoove you to test it out sometime - is the button actually working immediately or is it taking time after pressing (or multipressing) the button? Many elevators ignore the button and close when they want but people still think/feel like they were the cause.
> Many elevators have placebo ones
As I understand, basically no elevators have placebo close door buttons, but some have ones that only function when the elevator has been placed in manual operation mode, which requires a special key and is usually only done for service, emergency operations, and other special circumstances, and in which mode doors do not close automatically.
As I understand, basically no elevators have placebo close door buttons, but some have ones that only function when the elevator has been placed in manual operation mode, which requires a special key and is usually only done for service, emergency operations, and other special circumstances, and in which mode doors do not close automatically.
You can find photos of elevator control panels where the "close door" button is falling off, and is revealed to be just glued on with no electronics behind it. So commonly the button has a special-operating-mode purpose, but not always.
Yes, I believe man are placebo buttons.
https://en.wikipedia.org/wiki/Placebo_button
https://en.wikipedia.org/wiki/Placebo_button
> Why require someone to click Save at all, right?
Because you're making many changes to a large form and a partial update could result in someone else using bad data.
Because you're making many changes to a large form and a partial update could result in someone else using bad data.
It was a rhetorical question
This is interesting. Let's assume that I do require to use a Save icon and my usage makes sense. I can't think of a "better" icon to represent the saving action than a floppy disk right now.
Of course, ten year olds today wouldn't probably understand its origins. But what in today's world could represent a platform-agnostic, general purpose, "Save" icon? A flash drive? SD Card?
Of course, ten year olds today wouldn't probably understand its origins. But what in today's world could represent a platform-agnostic, general purpose, "Save" icon? A flash drive? SD Card?
This is all true, but there's also no cloud or sync icon. (I suppose those only matter for native apps.)
> Why require someone to click Save at all, right?
Think about commit in git. It is the logical evolution of the concept.
Think about commit in git. It is the logical evolution of the concept.
There is no 'Bluetooth' or 'WiFi' icons as well. I'm not sure whether we can read too much into unavailability of certain icons.
Consider a text field that changes a webhook destination URL. You don't want that thing to auto-save a half-typed "https://examp" unless there's some secondary "Deploy" button -- which then really becomes the save button, with a different name.
[deleted]
Some of them are great, but some of them aren't aligned with the pixel grid and thus look terrible.
I've used https://ikonate.com/, and this service looks pretty similar and of equal quality if not better.
> Use how you want, without attribution
This license reminded me of Sam Hocevar's [0] do whatever the fuck you want license [1].
[0] Probably one of the first to advocate DNS based ad-blocking way back in 2002: http://sam.zoy.org/writings/internet/doubleclick.html
[1] https://en.wikipedia.org/wiki/WTFPL
> Use how you want, without attribution
This license reminded me of Sam Hocevar's [0] do whatever the fuck you want license [1].
[0] Probably one of the first to advocate DNS based ad-blocking way back in 2002: http://sam.zoy.org/writings/internet/doubleclick.html
[1] https://en.wikipedia.org/wiki/WTFPL
Hey everyone, I'm the one that made these - happy to answer any questions :)
Great set! “Hierarchy” is misspelled as “Heirarchy”.
Oooo good eyes haha, thanks! Pushed an update.
Looks good! Push left vs. push right icons are inconsistent though. The "push left" icon makes sense (arrow pushing on a line), but the "push right" icon is more like a pull right icon. The line needs to be shifted to the other side of the arrow.
Though I'm always afraid of using icon sets (especially for a big product) because if I couldn't find an icon I need then sometimes it's not that easy to find this icon from another source with similar styling