It allows cherry-picking icons from dozens of different SVG icon packs (including Feather) and packaging them into a custom (web)font. It can also be used to package your own SVG assets into a single font file and then use resulting .woff as an SVG sprite sheet.
Perhaps it's just me but using a font to store icons seems arcane.
That's a linked svg, styled with CSS, though the CSS gets linked into the SVG header, rather than inherited from the page it is on.
<?xml-stylesheet href="sp-styles.css" type="text/css"?>
That wasn't my assumption, I was just seeing if it could be done, rather than if you might want to. That thought would make this method impractical, though there may be a way around that.
> To do it in the way you suggest would mean a different SVG file with the CSS file modified for each one?
Not necessarily. CSS cascades, and SVG can embed SVG. (Edit: I'm not actually sure about the browser support here. Do nested SVGs get to inherit from each other? Is that the same for all browsers? It'd require a bit of experimentation.)
So potentially, you could have a wrapper document that sets an ID or class that corresponds to how you want to change it, and then your base image linked within the wrapper.
The base image would cache, as would the base CSS file, however you could still apply changes.
A bit clumsy, but still allows you to avoid JS or in-lining, if that is what you want.
Of course, the wrapper won't cache, but it should be a very, very small overhead.
Also I had once accidentally deleted a project, contacted them and they were able to recover it within a few hours after my request. They are superb
I'm glad to hear it works for others though.
There is a reason the set contains a Twitter icon and not a Mastodon icon, a Facebook icon and not a Diaspora* icon, a CodePen icon and not a Dabblet icon, etc. Like it or not, these are the products that the people elected.
For example, this one looks really nice, but it only has 'battery' and 'battery-charging'. In an app I work on, I need battery with no charge, 25%, 50%, 75%, 100%, and charging.
Then I think that this would be small to add, but again I don't want to complain. Then maybe someone will need a battery with a sliding charge, so they can represent as many charge percentages as the pixels allow. And then this becomes a whole other things, and not just an icon collection..
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="1" y="6" width="18" height="12" rx="2" ry="2"></rect><line x1="23" y1="13" x2="23" y2="11"></line></svg>
It shouldn't be too hard to add another rectangle with whatever width you want. Just open up the dev tools and play around with it.
I could try to contribute, but it's not going to be in the style of the rest of the icons. That's the point of a collection. It's a collection that one or a team of people made. I can make a PR that they have to look at and fix and/or redesign. I could ask them to create it themselves. But in both of these scenarios, the designers of the collection need to do more work, for me, for free, which is not great for them.
These icons are provided in svg format. You can open it in Sketch app, draw a rectangle to show Desiree battery level, the click on the path and click "export/save as SVG".
Looking at the site usage, there's an advert weighing in at 36KB that uBlock was nicely hiding from me, but the biggest thing in the page is the web font, 48.58 KB worth. The site looks great on a browser with web fonts blocked, so I'm not sure why they're wasting bandwidth, effort and additional DNS resolution and TCP handshakes there.
How can the trademarked logos (Facebook, Instagram, Github, etc.) be provided without licensing terms?
That's why patents are such a big danger to FOSS software, because that's an equivalent situation.
Files created by Facebook, depicting the trademarked Facebook logo, are copyrighted by Facebook. Files created by Feather, depicting the trademarked Facebook logo, are copyrighted by Feather. If the latter is freely licensed, with no restrictions on use, you may use that image in whatever manner you please. If you use it in a manner that generates brand confusion with Facebook's business, Facebook may, as a trademark enforcement action, order you to stop using the image in that way. They cannot make additional copyright claims.
It is likely they will anyway, under the assumption that no one but Facebook would create files from scratch for corporate logo images, when the company itself distributes gratis images of its logo to anyone who wants to put one on their website. But if they didn't make it, they can't impose prior restraint on what you do with it via licensing terms.
Facebook may impose copyright licensing terms on its own images that support its defense of its trademarks, but those terms have nothing to do with the image by Feather, or any other clean-room implementation of the Facebook logo.
But if you did do that, there would also be nothing transformative either, so your new image file would not be eligible for protection.
If it seems stupid and counterintuitive to separate the property interest in the file from the property interest in the image described by the file, that's because it is. But some people wanted to be able to have copyrighted digital image files based on artworks that have been in the public domain for centuries, so here we are.
That's not my understanding of what the derivative works protection covers. What else is to prevent me from making a new Star Wars film using Lucasfilm's (now Disney's) characters?
You can make a Star Wars styled film that makes no mention of any existing Star Wars trademarks (an intellectual property minefield) and Disney couldn't touch you (legally). They could still smother you with their massive business negotiating leverage, by threatening to blackball anyone that screens your movie.
It's called pastiche.
"A “derivative work” is a work _based upon one or more preexisting works_, such as a translation, musical arrangement, dramatization, fictionalization, motion picture version, sound recording, _art reproduction_, abridgment, condensation, or _any other form in which a work may be recast, transformed, or adapted_. ..."
As applied to the company logo in question, the language is pretty well on point. I'd tread with caution unless the company has made it clear they approve of the work.
| .-| Probably does not
| -+-| violate copyright.
| | |
You'd be better off arguing some other angle, but please study law first so as not to waste anyone's time.
What's wasting everyone's time is the rich and powerful trying to mine out and own every last corner of culture. I'll be damned if I will allow Facebook to own every blue square with a lowercase 'f' in it, rather than just the one they use to mark their service. You may feel otherwise, but until this matter actually goes to trial, that's just, like, your opinion, man.
Basically, you use your own prudence when displaying references to a business (be it with their official branding or with an indirect reference). Of course, many businesses will try to strengthen their brand recognition by insisting you use their official branding or nothing… and only in ways they approve, lest you get on the wrong side of their legal team.
Problem is that the next time I need SVG icons I will forget these sites, try to google them and ending up on those sites that perform well on Google's SERPs but want money for clean SVGs.
This happened to me two days ago and I just fired up Inkscape and remade those icons. However, this took too long.
How can I remember such sites the next time I need them?
9 out of 10 times I can easily find the bookmark I'm looking for, by entering a few of those words into my bookmark search and/or address bar, and it doesn't require any special extensions or services.
I have started renaming the bookmarks - I leave the relevant part of the title (removing irrelevant stuff like brands, brand descriptions etc.) and then I add a set of keywords I associate with the link.
Later, when I want to find it, and call I can remember are some words I associate with the link, I type them in Chrome's search bar and it usually ends up matching at least 1 or 2 that I picked for the title, so Chrome finds the bookmark.
It is not a flawless system but it is effectively bookmark tagging without any additional tools. It's also based on how I associate the memory, and not on whatever random (and usually useless SEO-based text) the page creator decided to use for the title; which means that recalling the link is alot more straightforward because the way we hook memories tends to be really consistent.
Feather is licensed under the MIT License.
The same goes for classic simple buttons, nav bars color pallets etc - users know them already before they interact with your site. Most of that design work you did to make you site "different" or "beautiful" just made your site less intuitive for a user.
This opinion comes from experience building b2b webapps - users generally wish they didn't need to do the admin work the webapp is helping them do. So user stories are dominated by building the simplest quickest workflows to allow users to capture, fetch or manipulate the data they need and to then get back on with their lives - having standard controls that are familiar from other sites helps with this.
Don't you think it depends on a lot of factors, not just the use of a different icons?
Also I doubt users will have trouble understanding that a lock icon on feather and a lock icon on font awesome have the same meaning.
Of course - it all adds up. The trick is knowing where and when it is worth differentiating.
Also, you can style each path individually using CSS or SVG. That means you can easily have multi-color icons.
Bit of a tangent for product folks:
A lot of this stuff actually does look beautiful, but the use of "beautiful" as a modifier has diluted the term for me. When I click on something labeled "beautiful" I almost always expect to see "meh", and most of the time, that's exactly what happens.
Got some more info/theory on why you believe fonts display less sharp than svgs? And screenshots maybe? :)
Given the choice, I'd still use SVG btw, but that's because icons aren't text, and SVG is a lot better fit.
So I'm always up for a clearly-defined set of MIT-licensed icons.
Available as web font or individual SVGs, sources on github, SIL/Apache2 licensed.
Pre-order and get Font Awesome 5 Pro and ALL stretch goals for just $40!
In any case, personally I'd rather wait for other people to call my work beautiful. Seems a bit pompous to self-apply it.
Often, and I wish I had a better description, the people icons look like the symbols you see on men's toilets.
I'd be interested in icon sets which have better solutions for these people icons.
In this case I'd call them really cute.