Show HN: Mono Icons – A simple, consistent open-source icon set | Hacker News Reader

Show HN: Mono Icons – A simple, consistent open-source icon set

icons.mono.company

333 pointscdrove58 comments

Well, I like them a lot. It’s fine for people to ask why, but sometimes a project is just a project. Or maybe you wanted them for yourself and decided to be kind and open them up for everyone. In the good days of the Internet, the response would be: “that’s so cool! Great job!” I think that’s warranted here.

If I had to be nit-picky, my feedback would be: the lock and unlock icons are a bit too samey at small sizes on my non-high-res screen. Perhaps make unlock a bit more obvious? Shorten the open loop area a little more?

I think the heart might need a bit more dip at the top, too. Up close it’s a heart, but from further away the top part gets a little lost.

Finally, the laptop icon feels slightly off to me. I think maybe if the bottom “keyboard” part extended a little past the screen on the left and right it would feel better? Not sure.

I’m no expert on licensing, so double check that’s right. And I agree that you could probably crush them down more with an optimizer, but so can I. That’s easy enough. Overall: I like’em a lot! Great work. :)

Yes, that's a really cool project and I'm glad there are talented people releasing stuff for free like this. But I also think they didn't look very sharp and clear on my 720p 15' laptop screen. Curves look aliased and smaller icons like ticks and plus signs take some effort to distinguish. Just a friendly feedback.

> If I had to be nit-picky, my feedback would be: the lock and unlock icons are a bit too samey at small sizes on my non-high-res screen. Perhaps make unlock a bit more obvious? Shorten the open loop area a little more?

Or, alternatively, they could use a diagonal line, like in `eye-off`.

These look good. Good to see more open-source icon sets (like https://remixicon.com/ & https://feathericons.com/).

I'm getting overwhelmed by the amount of different sets though... I've found https://iconify.design/icon-sets/ for an overview, but I'm missing a quick visual comparison.

A simple, consistent open-source icon set designed to be used in a wide variety of digital products. Check out more info about our design process for this project on our blog post below. Link to download also attached. Cheers! https://icons.mono.company/ https://mono.company/design/introducing-mono-icons/

Thanks for releasing these under a permissive license (though you might consider dual licensing under Creative Commons Attribution (CC-BY) as well).

There are a few icons oddly missing from an otherwise rather well-rounded set; for example, you have "play" "pause" & "stop" , but no "record", "volume-up" & "volume-off" but no "volume-down", "copy" but no "cut" or "paste".

They look good, but my feedback is... why? There are hundred of mono icon packs around there. What's special about these ones?

The SVGs use 5 decimal places of precision. That's excessive. Especially for something designed for icon use. Drop that to zero or one dp to shrink the file size.

They are clean and consistent - and I appreciate the MIT licence.

(Not a direct reply to you)

If anyone likes the icons, doesn't like the float precision, and is in a Node environment, https://github.com/svg/svgo has a bunch of config options to help optimize SVGs. https://lean-svg.netlify.app/ is a site that lets you play with settings to see what kind of gains you can get.

There's also https://jakearchibald.github.io/svgomg/, which in a quick test got slightly better results with the default settings than https://lean-svg.netlify.app/.

https://mono.company/design/introducing-mono-icons/

I just read through their announcement and it seems reasonable, material icons are overused and OSS icons available don't provide design guidelines for extending (which they do).

I'm not a designer and haven't looked into alternative but this sounds like a good effort and I like the look.

I was recently involved in a project which used streamline icon pack, and while that set is huge and I don't mind paying for value - their licensing scheme is ridiculous - 3 licence tiers where the limitations are arbitrary and ridiculous and actually useful licence option is "contact us for a quote". Also they expose a private npm repo that requires per user token (per licence) with account for each developer (even those that just run frontend). We ended up removinh their icon set after paying upper 500$ tier - it's just not worth the hassle.

So if this is open source maybe some designer would accept commission work - eg few hundred $ per icon/or w/e per set and then that gets added to open pack I like the idea. Or if some designer working with them upstreams their additions.

> material icons are overused

This is kind of a funny sentiment to me. I get that styles change, and that an interface can look dated with an old theme or old icons. Aqua looks out of place on a current Mac (although I kind of miss it), Aero looks out of place on Windows 10, etc.

Personally, I get a little annoyed when icons change. KeePassXC changed their icons a couple of months ago, and I still feel like I need to hover for a tooltip to confirm what this cryptic outline signifies.

I guess I just like the idea of a consistent design language, so overuse away!

Ideally (IMO) you want your app to be recognisable - using plain material design feels bland - sort of like programmer art - as a user I'd gravitate towards a more custom/tailored look - when done well it communicates effort and thought was put into something (at least to me).

We hit the same w font awesome. Early kick starter backers, love the designs + css integration, wanted to pay for embedding into our product, but all sorts of unviable restrictions as soon as someone wanted to share a link to a report etc generated with our app. Totally fine paying, but broken licensing =\

I completely missed the introduction you linked. That's _amazing_.

As a non-designer, I've had a few situations where I've wanted to use a minimal icon pack but it's missing the one or two icons I would need. I'm not opposed to putting something together myself (Inkscape, etc aren't that scary) but I always end up visually inconsistent. I just never know what to look for

But this? I can totally make an icon that fits this visual language. Even better since I can take an icon I like from another OSS icon pack and just make it fit. Even better than I can contribute back if I wanted to

They're nice icons.

Two points of feedback - embedding a fill color on a path in the SVG makes it a pain to override with CSS. Also, picking a random one, moon, and running it through SVGO shrank the filesize by 45%, so they could maybe use a bit of further optimization (although that could be left to the user).

"tiny little cute icons" is already a big problem in UX. Every designer should be testing the success rates of "little icons" against textual labels. If you have to have an animated tooltip on hover that says what the icon does, it's a big red flag.

Don't cargo-cult.

I agree. If you have one or two very obvious icons it can work. (Although always include a tooltip as well.) However I often see a toolbar full of similar looking icons and it is so hard to find what I am looking for. (I'm looking at you GMail)

Fortunately it is possible to switch to text-only buttons in Gmail.

I assume partly that designers do that since textual labels require translation, but icons generally don't. What fits perfectly in English often doesn't fit in German.

> I assume partly that designers do that since textual labels require translation, but icons generally don't. What fits perfectly in English often doesn't fit in German.

Except that icons need tooltips, which would require translation anyway.

You missed the second sentance. The length of the translated string is less critical for a tooltip compared to a toolbar filled with buttons.

Imagine when an app is to be translated to 20 languages. Only the original language had the luxery of having a voice in how many buttons fit on the toolbar.

Is it really open source? The files on Github look like they’re exported from something, so surely there is an actual source file that you didn’t include?

Curious why this would be downvoted, is it strange to expect access to source files when a project claims to be open source? Or am I missing where to find the source files? I looked in Figma too - all I can see there are flattened filled shapes, which doesn’t seem to be the originals.

I hate single color icons. For me Tango icon theme is peak of usability, anything else is downhill from there.

I have the exact opposite opinion.

Have you ever run user tests though?

You're being sarcastic, right?

In terms of usability, monochrome line icons are not particularly a good idea. At a glance they tend to look the same. They’re often abstracted to the point where you need to be familiar with the “vernacular” of app iconography to interpret them.

They are mostly used for aesthetic reasons. It wasn’t that long ago that icons were expected to use color and shading. For usability’s sake, we should hope some version of that trend returns.

It is not black and white, though (excuse the pun).

Imagine for example a piece of software with a settings menu which maybe gets used once per user, if ever, and it is only for technical stuff (think: assign more RAM and change V-Sync method). For that use case, a simple, subtle icon which is perfectly findable for the target group in the rare case it is needed is perfect. A colorful, detailed icon might disproportionally distract and thus diminish user experience.

Point is - use the right tool for the right job, and thanks to the author for providing a specific tool!

The proper identifier for a rarely used feature is a WORD .

I've looked into Linux XDG icon packs as a source of freely licensed in-app icons optimized for multiple pixel resolutions. Tango (last updated 2009), Humanity, and Oxygen (forgot what Gnome icons are called) are, in a way, the last of breed for multi-colored icons. Practically no modern icon themes released within the past few years have toolbar icons with outlines and colored fills.

These icons have outlines. On the plus side, they look decent on any color background (though Humanity icons have too light-colored borders, which can make light icons hard to see on light backgrounds). On the minus side, the outlines look noticeably blurry when rescaled instead of picking the nearest integer size.

Monochrome icons are less damaged by resizing. However, they can become essentially invisible black icons on a dark background (or vice versa), so often come in light/dark variants. Apparently KDE has an extension to XDG icon themes called "FollowsColorScheme", where the renderer will automatically recolor -symbolic icons. (Documented at https://github.com/lxqt/lxqt/issues/1181 )

Do packs like this exist for cartoony/sketched-looking/diagrammatic stock graphics, images rather than icons, e.g. for product overview pages where the illustrations don't really illustrate anything about the product, but make the site look a bit prettier - cartoon figure points at whiteboard thinking if only he'd heard of this SaaS his life would be so much easier type thing?

The few times I've tried to find something (it not being important enough to look into paying someone) all I can find is SEO spam generic photos/renderings.

Do you mean something like Humaaans [1] , unDraw [2] or DrawKit [3]? I don't have experience with any of them, but I noticed some of them being mentioned on HN before.

[1] https://www.humaaans.com/ [2] https://undraw.co/ [3] https://www.drawkit.io/

Yes, thanks!

And I certainly wasn't expecting the customisability of Humaaans, that's great.

Like clipart or yesteryear?

Not sure about the `mobile`.

Here are my thoughts: https://codepen.io/shvi/pen/poyqxWL

Pretty cool, but looks very similar to many other libraries like [1] bytesize-icons.

What i'd like to see in an icon library is a huge range of icons, and the ability to tweak and combine icons...

[1] https://github.com/danklammer/bytesize-icons

Nicely done!

You should add a background color for the website tho. Mine is set to dark, so I don't see anything. :D

(Easy rule btw: If you style the forground you need to style the background, too. And vice versa. Your default settings aren't mine!)

There's also ForkAwesome[1] which has 744 icons. My main gripe with many icon sets that they often miss an icon or two kinda breaking the set, with fork awesome I hadn't had that issue just because of how massive it is and much easier to extend as it's still actively maintained and worked on.

https://forkaweso.me/Fork-Awesome/icons/

At this point I’d like to see some sort of icon service that uses Machine Learning to take any icon I pick from, say, the Noun Project, and adjusts the fill, line weights, and roudness for me automatically. I’ve found the problem with most icon sets is that they’re always missing a few, and I’m not a designer, so making those myself is time consuming. If a machine could do it for me, I’d be loving it.

They're simple, clean, unified, and I love the license. Nice work! Going to pass this along to the designers so they know it's an option.

I like these a lot. Simple clean, clear. Thanks for sharing.

Also want to add https://thenounproject.com/ to the comments here. I'm not affiliated. It's not great for finding icon sets, but if you are looking for a one off icon of something obscure I've found it useful a couple of times now.

My personal favorite was always http://famfamfam.com/

Agreed. So popular back then, but gorgeous and neat. Their flag set was also my go-to choice until I switched to Apple Emoji flags as images.

Ah, the time of 16x16px icons. I used famfamfam until I discovered fugue, which had a similar aesthetic but three times as many icons and many more badges for making variants.

https://p.yusukekamiyamane.com/icons/search/fugue/

Sadly these icons aren't scalable for sharp rendering on HiDPI displays. I tried running xBRZ on them, but the icons are too blurry/antialiased for the algorithm to really know what to do, and the output is a blurred mess.

Really hope there are svg version of these icons.

You might want to put these on nounproject.com, where people can find them and you'll get royalties for their use.

Not bad! They remind me a bit of vector versions of the awesome bitmap artwork Susan Kare designed for the original Macintosh in 1984.

These are not really my own style, but they are undoubtedly tasteful. A project could do worse than to take advantage of them.

I personally like to use https://iconsvg.xyz/, which not only lets you pick the icon, but it also allows you to customize it.

i don't get it... there are 136 icons in this pack vs fontawesome 5 having 1600. is there a huge reason for using this vs fontawesome? also... fontawesome seems to be the standard nowadays so i don't see why i would use this. hats off to author for creating and releasing it though.

Fontawesome licensing is incompatible with a lot of commercial use, eg, as soon as you have a CMS end-users post comments etc on, even though the intent was pay-per-designer+dev, not end user

Is there a free font that covers all the UTF8 emoticons?

Mozilla does have one, but Im not sure it cover all of them.

Beautiful! Thanks for open-sourcing your art. This is not common, yet highly appreciated.

Looking good, might try using them for a project!

Thats as clean as it gets. I like it!

These look awesome!

nice

Reply on news.ycombinator.com