Devicons, an iconic font made for developers | Hacker News Reader

Devicons, an iconic font made for developers

vorillaz.github.io

141 pointsMozMorris77 comments

I wish icon fonts used ligatures to select the right glyph, rather than meaningless codepoints (e.g. you can make font automagically replace characters "git" with the Git logo).

Otherwise these fonts end up being used in a non-accessible way (I browse with webfonts disabled and keep seeing boxes instead of images, with no fallback or a useless display:none'd fallback).

PUA characters are use as a proper way in order to render in all browsers. https://news.ycombinator.com/item?id=8052346

Although private use area is technically a proper way to add a custom symbol to Unicode font/text, it's not the best way from accessibility perspective.

For users who can't see the font the character will be completely meaningless. Instead of getting e.g. "Compatible with Linux!" they'll get "Compatible with reserved symbol U+E001!"

Is there an example of a font that does this anywhere?

Yes! https://symbolset.com/

That is incredibly cool. Thank you for linking it.

Isn't it most likely that people don't do this because they simply don't know about it?

"an iconic font made for developers, code jedis, ninjas, HTTPsters, evangelists and nerds."

Urgh. Why do people do this?

I thought that would be a good catchphrase to grab some attention. My apologies.

I thought it was pretty funny. It seemed absurd enough that I thought it was totally tongue-in-cheek.

I read this as more of a tounge-in-cheek joke about people who do this, but I may be wrong.

They forgot rockstars.

They aren't just vectorizing other peoples logos and calling it an iconset. They're "sampling" other peoples logos, in a hip hop sense.

Has anyone cleared the corporate logo use with a lawyer? In particular, keep in mind the following regarding the Apple logo:

    #   NOTE: The graphic image associated with the Apple logo character
    #   is not authorized for use without permission of Apple, and
    #   unauthorized use might constitute trademark infringement.

http://www.unicode.org/Public/MAPPINGS/VENDORS/APPLE/ROMAN.T...

All trademarks fall under that, realistically, not just Apple.

I am aware of that. As the developer of Devicons I am not claiming any rights upon the logos.

Also take a look at the note at the very bottom of the page:

Note: All brand icons are trademarks of their respective owners. The use of these trademarks does not indicate endorsement of the trademark holder by the author, nor vice versa.

The author instructs loading the entire font package, which is 35KB, onto you website. I don't think this is a good approach from a performance perspective. I recommend using tools like Fontello to create custom font files with just the icons you need.

Not web dev question - I'm curious, what is the advantage of using a font rather than images?

Font files are vector "images" which means your icons will scale gracefully to any size. This is probably the main advantage.

Depending on the complexity I imagine fonts would also be smaller than corresponding bitmaps although I never actually checked.

SVG are vector graphics that can be rendered in all modern browsers:

http://caniuse.com/#feat=svg-img

You do miss out on the recoloring and any other font styling options though.

Actually you can style SVG with CSS

    #yourSVG {
        fill: red;
        stroke: blue;
    }

I don't think you can re-style a SVG with CSS if you embed it with IMG. CSS styling has to be inline with the SVG, so you can embed it directly, or you can change CSS with JS.

mind = blown

The problem is that, until <svg use> is standardized and supported, the only way to style svg elements is if you include them in your markup (or use something like Iconic's SVG Injector).

There's a tradeoff between inlining (or rather, including them server-side) and calling them as <img>, background-image, or fonts. The size, http requests, caching , and styling all play a role.

They can also be recolored more easily, making themes easier to maintain.

But they can only be one color. I don't think gradients and stuff work on them.

There are ways to use multiple colors:

http://www.pixelambacht.nl/2014/multicolor-icons/

You can change the color and size without having to change or edit an image. Plus things like pixelation dont happen with fonts but you could use canvas in a similar way. I've seen some cool logos done with canvas.

Less http petitions and bandwidth. Also, they are vector-based so are great for all resolutions and sizes.

Why is this being downvoted? Did I say anything false?

If you had a closer look on the page and the FAQ section you would have noticed that there is a manifest file that you can load into IcoMoon and select your desired fonts to use, minimising the size of the fontset. PS Font awesome is much much more big in size.

Unless you're missing a 0, does a file size like that really matter?

On mobile, yes. Even on good networks, you don't always have a strong signal. Download size is always a factor on mobile. 35kb isn't a big deal if it were needed but if 90% of the download is wasted then you probably don't want that.

Some of the logos reproduced in this belong to very litigatious companies. I don't think this will live too long.

Pay attention when using the Rails logo:

http://www.rubyinside.com/david-heinemeier-hansson-says-no-t...

I was going to say this... Any person designing this kind of logo collections should ask first. Legal troubles can arise. Sad but true...

I don't think the responsibility to get legal permission is on the creator of the collection, but on the person using the logo instead.

If the creator is distributing the collection, it's legally her/his responsibility, as well as of everyone who uses it.

That said, fair use applies.

You think or you are sure?

The creator of the collection is using the logo by putting it on the web page. Also, the logo is licensed under MIT, which he probably cannot do, if he doesn't hold the rights.

'Using the logo' is different from 'using the logo in a manner infringing the holder's trademark'.

Simply displaying an Apple logo, for example, and saying 'this is the Apple logo' is perfectly valid. Pretending to be Apple or Apple-endorsed is a different matter.

Publishing it as MIT is, on the other hand, a different cup of tea.

I am not disagreeing that this is possible, but the parent wasn't sure of the correct position, either.

The thin font used for the tags has readability issues. Is this a Windows-only problem?

Screen: https://twitter.com/simevidas/status/490104115826270208

I'm using chromium, with directwrite enabled and it looks exactly like you're describing. Thin fonts with Chrome/Chromium are always a problem.

Fonts were a problem in Chrome before it started using DirectWrite, but in this case, DirectWrite seems to be unable to render the font properly as the issue is present in IE too.

Looks terrible on a retina MacBook too... (in 1920 mode) http://imgur.com/a/ntEQW

I am not sure I get it - it seems to be logos of well known tech companies or their well known products.

Why would I want to use someone else's icon ?

Perhaps if you were building a web version of your CV you might want to use icons to symbolise knowledge.

Doing that comes with a huge Google indexing penalty.

Do tell...

It's pretty impressive that they've managed to make a site that shows off some icons hang on a loading indicator.

In the browser support section, shouldn't "IE up to 8" be "IE down to 8"?

"IE 8 and up."

Wow, so much negativity here on HN. I think it's a pretty cool set of icons.

Is it just me or is this page painfully slow on mobile...? I have a Nexus 5.

Terrible on iPad. I eventually tried to interact with the spinning loading pencil it was taking so long.

I was disappointed this was just logos, rather than an icon font for developers. I was expecting useful icons that aren't a part of sets like Glyphicon (databases, servers, etc.).

That is not the initial purpose of Devicons. You can try some other free font set such as Ionicons or Font Awesome.

I, for one, welcome all progress towards the inevitable vector future without unnecessary pixelation. :)

I think the Go gopher is, rather than a trademark, a copyrighted work under a CC-Attribution license. The attribution to make this use of it legit could just be adding "Go gopher by Renee French, under CC-Attribution license" to the Note section. (See http://blog.golang.org/gopher.)

Link to GitHub repos: https://github.com/vorillaz/devicons

Someone please make a logo quiz for this!

There seems to be an embarrassingly large number of people who think web developers == developers.

I think it's all about context. It's been my experience that "developer" is mostly applied to web developers and "programmer" is most often used when talking about desktop application development. In this context I don't think adding the word "web" before "developer" makes it any more clear as it's web developers who mostly use icon fonts and web developers who are the target audience here.

I'm not convinced that's how the split works - I don't think I've ever heard the phrase ".NET programmer", for example, and it was originally a desktop tech.

See also: "App developer", "Java developer", "mobile developer", etc. Contrast: "assembly programmer", "COBOL programmer".

Also, this guy is the authority, and he was talking to desktop devs: https://www.youtube.com/watch?v=8To-6VIJZRE

a title attribute would be nice, I honestly have no idea what half of this icons are :)

The .NET logo is wrong, this is not the C#/MS logo. The logo used comes from a Brit publication called ".net" which has nothing to do with MS .NET.

I noticed that too, so I opened up an issue on the repo: https://github.com/vorillaz/devicons/issues/17

Well, the selector is "devicons-netmagazine" so it seems intentional

It's funny that there is a logo for the magazine, but not the programming framework the magazine is actually about.

.net magazine isn't about .net. It is (or at least was, I'm not sure if it's still going) a magazine about web development.

Or you know, you could just use plain images.

What software was used to design these icons, i.e. how would one go about adding a new icon?

Why bother? Isn't it better just to donate these icons to Fontawesome?

PostgreSQL! ...man

Very nice, thank you. Will definantly use it.

Why Yahoo but no Twitter/Facebook?

I have grabbed developer related websites/social networks. Furthermore Facebook and Twitter are already in use in other icon fonts.

This is totally awesome.

Thanks and Great work <li>Download and extract the repository</li> <li>Copy the <code>devicons.css</code> to your project</li> <li>Copy the <code>fonts</code> folder to your project</li>

Reply on news.ycombinator.com