CSS is fun and cool and I like it.
Link

Accessible SVG Icons With Inline Sprites

This is a great look at accessible SVG markup patterns by Marco Hengstenberg. Here's the ideal example:

<button type="button">
  Menu
  <svg class="svg-icon"
     role="img"
     height="10"
     width="10"
     viewBox="0 0 10 10"
     aria-hidden="true"
     focusable="false">
     <path d="m1 7h8v2h-8zm0-3h8v2h-8zm0-3h8v2h-8z"></path>
    </svg>
</button>
Read article
user avatar
Shared by
Chris Coyier
Link

Emojis as Icons

There are lots of unicode symbols that make pretty good icons already, like arrows (←), marks (✘), and objects (✂︎).You can already colorize these like a normal font glyph. Then, there are emojis, those full-color suckers we all know about. What if you could take just the shape of an emoji and use it like a normal glyph? You can!

Preethi Sam shows how:

.icon {
  color: transparent;
  text-shadow: 0 0 #ec2930;
}

Plus, an alternate technique using background-clip. … Read article

user avatar
Shared by
Chris Coyier
Link

Extinct & Endangered

I've been watching a lot of nature documentaries lately. I like how you can either pay super close attention to them, or use them as background TV. I was a massive fan of the original Blue Planet, so it's been cool watching the Blue Planet II episodes drop recently, as one example. A typical nature documentary will always have a little look how bad we're screwing up the environment twist, which is the perfect time and place for such … Read article

user avatar
Shared by
Chris Coyier
Link

Etsy’s Evolving Icon System

Etsy moves away from an icon font in production to using SVG. It's going to be an inline <svg> system, but abstracted as a <etsy-icon> custom element for ease of use.

Two cents:

  • I could see the need for that abstraction going away if we had a more convient syntax for <use> available, like: <svg use="icons.svg#cart" />
  • I like how dedicated they are to icon consistency. I struggle with this a lot. An SVG icon process can be so easy
Read article
user avatar
Shared by
Chris Coyier
Link

$1,076,940

High five to Dave Gandy and the Font Awesome team:

The Font Awesome 5 Kickstarter raised $1,076,940 with 35,549 backers, making it the most funded and most backed software Kickstarter of all time.

What's do the funders get? 1,000 more icons, icon font ligatures (a uniquely cool thing fonts can do, like turn "right arrow" into ➡, which can be an accessibility win), and, drum roll please, an SVG framework that will be open sourced. … Read article

user avatar
Shared by
Chris Coyier
Link

CSS ICON

Wenting Zhang created 512 (!) icons with just HTML and CSS. Usually just one element, the occasional extra element thrown in, and drawn with things like borders, backgrounds, and box-shadows.

Looks like the same bug bit Wenting that bit Nicolas Gallagher. Taking the shapes that CSS can make and combining them to draw.

Predictably, I'm going to point out that SVG would be a more-ideal tool for this. Less fragile, easier to maintain and style, scaleable, etc. I mention … Read article

user avatar
Shared by
Chris Coyier
Article

Icons and Teams

Say you're working on a website that uses an icon system. Lots of people who work on the site interact with the icon system. Designers create new icons, they tweak existing ones, they have ideas on what they want the icons to do. Developers building out the pages of the site use the system.

Say you're the front-end developer. You're implementing this system. You're the middle man. You're the creator and consumer of this system.

What do you ask of Read article

Link

How to work with SVG icons

Solid basics of an SVG icon system in this guide from Florens Verschelde, mixed with some good tricks: the two-color trick, pre-loading the sprite, and using custom properties for unlimited color variations. Also an interesting bit about using multiple methods for sprite insertion:

I like mixing both methods, building two sprites:

  1. A small one with essential icons (e.g. main icons used in the page header), to be inlined on each page. Target size: 5KB or less.
  2. A bigger one with
Read article
user avatar
Shared by
Chris Coyier
Article

Ligature Icons via Pseudo Elements and Icon Fonts

The following is a guest post by Jason Jacobson, a senior engineer for Minneapolis based startup LeadPages®. Jason shows off something I didn't know was possible: turning a string into an icon. This requires an icon font, and I generally refer SVG for icons, but that doesn't stop this from being a bonafide CSS trick that is certainly worth knowing about!Read article

Article

Creating an SVG Icon System with React

I recently went to Michael Jackson and Ryan Florence’s ReactJS Training. I was really excited to attend, partially because I had so many questions about SVG and React. There are a lot of bits about working with React and SVG, and especially manipulating it, that aren’t quite supported yet. One of the major gaps for me was the <use></use> element, as most SVG icon systems are built with <use></use>.

I asked Michael if he thought better support might … Read article

icon-link icon-logo-star icon-search icon-star