icons posts

Inline emoji favicon

On a simple one-page site, I wanted as much as possible to be inline in the single document request. I didn’t have a favicon, and I didn’t want browsers to make that extra request. I considered just adding an empty file, as I’ve done sometimes in the past, but that would still be an extra request. So I looked up if it could be inlined. It can be done, with a data URL. And using an SVG format, an emoji can be used for a cheap actual icon.

Continue reading post "Inline emoji favicon"

Working with SVG Icons

At Cogneato, we’ve been using icon fonts for at least a couple years now. We recently started using SVG icons for a new part of our CMS that allows clients to pick icons from large collections for use in their content. Working with SVG’s is a bit different than with icon fonts, so I created some helper code to make it easy to get them in place, have proper accessibility, and

I like icon fonts fairly well, but there are some advantages to using SVG icons. For us, we were wanting to allow clients to pick from a large selection of icons from within our CMS. Requiring downloads of giant icon sets so they could have a large selection but only show a few on a page would be very bandwidth inefficient, and managing loading the set(s) a particular client wanted to use would be complicated. Unless they use a lot on a single site, cherry-picking each icon should use less bandwidth. This is easy to do with SVG’s.

There are many ways to use SVG’s, but when you need to be able to change colors based on context as we do, inlining SVG elements is the only (practical1) way. With them, you can use fill: currentColor; to use the text color of the container, which we need. Many SVG tutorials use SVG sprite-sheets and then inline spartan SVG elements that contain little other than the <use> element to reference icons from the sheet, saving size for repeated icons and potentially allowing the sprite-sheet to be cached. However, sheets have the same bandwidth management issues as the icon fonts. So I went with direct DOM insertion.

Continue reading post "Working with SVG Icons"