It's nice to see an hour old project pop up on HN.
So essentially this project is:
- Collection of two-color SVG icons
- JS library to allow changing one of the colors programmatically
What about splitting these two features into different projects? There's already a database of millions of monochrome icons at https://thenounproject.com/ and https://icomoon.io/app/. Is there a way to leverage that to somehow produce two-color icons from monochrome icons?
Instead of combining your JS library with your specifically-designed SVGs, why not invent and advertise a technical SVG standard that icon designers can comply with in order for them submit them to your two-color icon curration project that I'm proposing. Then, the JS library would simply implement the ability to change colors assuming the icon follows the SVG standard. To promote openness, note that I'm not proposing a design standard/language to be accepted into a database but a technical standard just for allowing the JS to function. The icons in your own collection should follow your own design language (which looks very professional), but the database should include all design languages.
You also get up to two dynamically stylable colors in SVGs without using CSS variables, with wider browser support. If you remove the 'fill' style entirely from the first path in your example, and set the second path's fill to 'currentColor', you can then adjust those path colors such as:
Depends on your market, it appears for me, most of Europe is Safari / Chrome, but Japan is almost entirely IE 11, China is mix of IE / 360 Browser. Sometimes it's not easy to not care.
This is just observation based on stats from Google Analytics at work. I hope you're not assuming that my statement is the overall usage of browsers by country.
"Is there a way to leverage that to somehow produce two-color icons from monochrome icons?"
I have looked at random SVG icons code from the Noun Project, the answer is no. Or at least not in any systematic way were you could be guaranteed that the division of colors made any sense.
It would of course require human interaction for each icon, but it could be done efficiently with custom software for dividing and selecting components for the "emphasis" color. Most icons involve multiple unioned paths, and some icons have entirely separate components, although all at the Noun Project are monochrome.
This process could be done by those wanting to add an icon to their site. The motivation is there, just need a web app to upload an SVG, click some subpaths, and download a "two-color standard-compliant" SVG.
I have been toying with a service for something similar this - not so much that but rather autotracing combined with easy tracing, grouping of areas based on color, stroke, parts of image. The same grouping tools could be used to automatically separate out parts of the nounproject. Extraction of styling into css classes for easier control later.
mainly a developer/designer tool I would expect people to open the svg later and write styles with css. But at that point a tool could be built to handle the easier styling requirements.
I started disabling Javascript by default a few weeks ago using uMatrix, and I find it puzzling why people would use this? I currently use Font Awesome on my own site, and one task on my backlog is switching out to plain svg files to save on bandwidth (and not require a webfont download). I also have two layout elements that require Javascript I want to try to get rid of as well.
I think we should see more of a movement to get away from Javascript for displaying basic content.
As far as JavaScript goes, it has been a part of making sites work since the 90's. End users and developers won't ever be moving away from it since there are usually improvements that are gained by using it.
Have you use uMatrix? By default it does allow first-party Javascript, but I have that disabled. If I got to a website that needs Javascript, I click on uMatrix and enable just the scripts I want. It shows me all the ad and tracking domains as well. I get to see where code is coming from before I allow it to execute.
It does take a little bit longer to setup. You might have to refresh a page 2 or 3 times to get the right rules, but it keeps a lot of excessive Javascript from running in the background. If I disable first-party by default, it also prevents modals, cookie warnings, pay walls and all that other garbage. It reduces my browsers memory footprint and CPU usage as well.
> - Regardless of two-tone scheme chosen the icons look pretty awful
How is this helpful? It's probably high contrast to show you that you can configure the colors via config [1]. I'm sure you didn't look that far, though.
It's about the design of the icons, not the colour scheme. They just aren't very good icons (IMHO at least, and presumably that of the previous commenter)
Read what I wrote. I use words for a reason and if you don't read them you will miss important information.
Why do you think I would have taken the time to point out that the icons are ugly regardless of two tone scheme chosen if I hadn't
a) figured out that the color scheme is configurable,
b) given some thought about other ways of coloring the icons (including choosing the same value for both colors, choosing subtle shade, hard contrast etc)
c) decided that the icons are not very good regardless of how you color them?
I'll grant you that I could have been more precise. I could have pointed out that they are both ugly and that the semantics aren't as consistent as something that is designed with care.
IonIcons is another good resource for SVG icons. Used them last week in a Qt Frontend and they look great. Open-source and both material and iOS styles:
As no one is talking about the design of this icon library, let me be the first.
These icons are 'okay', but none of the examples show sizes less than 48px. The frontpage, uses even larger sizes.
Under 16px width, the icons are difficult to distinguish--even from one another. The color choice of high contrast combinations exacerbates this because it uses zebra striping within the element, rather than using contrast to help distinguish the borders.
If you are planning on using this lib, keep that in mind and use the icons in the largest possible format--perhaps for branding pages. I wouldn't use it for complex application UI, especially not on mobile.
I am in the market for a decent icon set so I am quite specific about what I want in an SVG icon.
Realistically I need a few icons for buttons, account login things, edit buttons and so forth.
I want to have extremely lean and speedy code. This means having a simple inline stylesheet with 'use' being how I put icons in my content. So the account navigation at the top has the icons e.g. 'account' (which is some weird head and shoulders icon type of thing). The forward - next buttons for browsing an image gallery need to be in there as does a popup modal closing 'x'.
The forward button is the same as the back button with it rotated around 180 degrees, the original def being just two lines.
Instead of using some style tags baked into icons I want to set fill and stroke to be 'currentColor'. In this way if I change the link colours then the SVG icons update.
I also don't want width and height in my icons. I want just the viewbox.
My icons are not a semantic element so I also want to put them in the stylesheet with ::before and ::after pseudo elements. Except for in places like the header logo where an inline SVG is legit.
Because I want to 'use' elements I want a master arrow where I can change it and know my changes will be in both the forward and back arrows, or even the up/down wherever arrows.
I also want some space saving social media icons that are not styled but as Facebook/Instagram/Pinterest/Twitter designed them. I want the blue bird not some 'creative designer' effort at improving on the icon. This is for reasons of 'Don't Make Me Think'.
I also want to have titles and descriptions in my icons, in this way I can have useful mouseover text.
Maybe I get my 'service worker' to do the work rather than have the icons embedded as inline on every page. The page can then render nicely on a poor connection even if the icons are missing. This will involve a repaint though as 'svg use' markup might have nothing to 'use'.
A telephone icon would be nice, as would a letter icon for email. In this way I can have a 'call' or 'email' icon in there. The unicode versions of these are no good as the size jumps all over the place.
What I don't want is:
Yet another bit of render blocking javascript
Yet another download
A library of icons including the cruft I am not using.
Icons which need a lot of fettling to be used inline
Icons with style definitions baked into all of them.
Another toolkit to learn.
Another CSS color gig to learn, I want just currentColor.
Paths that are compressed. If I want to compress them then I will do that with defs and use, to keep the original components, e.g. that arrow, as something that makes sense.
So please, if you want to write another SVG icon set, get it to work with 'use', keep the icon content out of the markup, e.g. in the CSS without hacky 'i' tags.
Give me some instructions too about doing it the proper way that works for screen readers as well as those that can read.
Here's my advice from building a couple websites with tons of icons (almost overuse, because I really like using icons on everything).
Just use img tags with Noun Project icons. Use a scripting language of your choice to change the fills and extract the Creative Commons attribution from the XML, and you'll have full customization of the color and size of your icons. There's probably a service out there that does this for you, but a quick search returns no results. (Idea for a project!) But regardless, Noun Project SVG is extremely simple for parsing with a 20-line script.
Don't bother with rotating 180 degrees to generate forward buttons, etc. That's just preoptimization. Just use two different icons. Your company/project/organization will not see the tiniest financial effect of loading tons of unnecessary SVG files vs. optimizing them.
> The forward button is the same as the back button with it rotated around 180 degrees, the original def being just two lines.
A sane minimal arrow button will be just one short path; referring to the other and rotating it 180 degrees can easily be more verbose and complex.
> I also want to put them in the stylesheet with ::before and ::after pseudo elements.
This is incompatible with several of your other goals: currentColor, <use>, <title>, <description>.
> I also don't want width and height in my icons. I want just the viewbox.
In some contexts there are distinct advantages to specifying width and height; most notably, in inline SVG, before the stylesheets which define the size have loaded, they will tend to fill the available width instead, leading to massive icons briefly, or if the stylesheets simply fail to load (or are blocked).
> I also want to have titles and descriptions in my icons, in this way I can have useful mouseover text.
Better still, have actual text beside the icon. Text is really good. Icons and text is commonly really good. (In that case, you just want aria-hidden=true on the icon.) Icons with no text are generally just a bad idea.
> Maybe I get my 'service worker' to do the work rather than have the icons embedded as inline on every page. […]
So essentially this project is:
- Collection of two-color SVG icons
- JS library to allow changing one of the colors programmatically
What about splitting these two features into different projects? There's already a database of millions of monochrome icons at https://thenounproject.com/ and https://icomoon.io/app/. Is there a way to leverage that to somehow produce two-color icons from monochrome icons?
Instead of combining your JS library with your specifically-designed SVGs, why not invent and advertise a technical SVG standard that icon designers can comply with in order for them submit them to your two-color icon curration project that I'm proposing. Then, the JS library would simply implement the ability to change colors assuming the icon follows the SVG standard. To promote openness, note that I'm not proposing a design standard/language to be accepted into a database but a technical standard just for allowing the JS to function. The icons in your own collection should follow your own design language (which looks very professional), but the database should include all design languages.