-
ArticleCreating a Maintainable Icon System with Sass
Read ArticleOne of my favorite ways of adding icons to a site is by including them as data URL background images to pseudo-elements (e.g.
::after) in my CSS. This technique offers several advantages:- They don’t require any additional HTTP requests other than the CSS file.
- Using the
background-sizeproperty, you can set your pseudo-element to any size you need without worrying that they will overflow the boundaries (or get chopped off). - They are ignored by screen readers (at least in
-
Article
A Pretty Good SVG Icon System
Read ArticleI’ve long advocated SVG icon systems. Still do. To name a few benefits: vector-based icons look great in a high pixel density world, SVG offers lots of design control, and they are predictable and performant.
I’ve also often advocated for a SVG icon system that is based on
<symbol></symbol>s (an “SVG sprite”) and the<use></use>element for placing them. I’ve changed my mind a little. I don’t think that is a bad way to go, really, but there is … Read article “A Pretty Good SVG Icon System” -
Article
How Can I Make My Icon System Accessible?
Read ArticleHere’s a question I got the other day?
… Read article “How Can I Make My Icon System Accessible?”Would you suggest icon fonts or inline SVGs for a complex single page application? And are there specific accessibility concerns for either? Accessibility is especially important for us because schools use our products. I ask because we are currently in the process of unifying and setting up an icon system.
-
LinkEtsy’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
- I could see the need for that abstraction going away if we had a more convient syntax for
-
Article
Creating an SVG Icon System with React
Read ArticleI 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 “Creating an SVG Icon System with React”
-
16: SVG Icon System – External Source
Read ArticlePutting that SVG defs block at the top of the document definitely works. It has some advantages too, like the fact that no HTTP request needs to be make, all the information for drawing the graphics is right on the page. But, it has some disadvantages too. All that information needs to be parsed by the browser on each page, from the document. It’s not a separate document that might already be cached by the client, like other assets might … Read article “16: SVG Icon System – External Source”
-
15: SVG Icon System – Where the defs go
Read ArticleOnce we have what we are calling our “defs block” of SVG – that chunk of SVG that defines all the things we want to draw later – where do we put it? So far we’ve been putting it directly into the HTML, and that absolutely works. If we leave it at the top of the page, say just after the opening
<body>tag:</head> <body> <!-- include svg defs here -->That will work great in all browsers that … Read article “15: SVG Icon System – Where the defs go”
-
14: SVG Icon System – Building Out Defs
Read ArticleThe
<use>element is clutch to this whole idea of an inline SVG icon system. We learned that a clean way to do it is to put everything you intend to draw later into a<defs>block so it doesn’t render and we can reference them later (tell them browser to draw that icon).In this video we’re going to spend some time building our own
<defs>block by hand. It’s not particularly difficult and, I think, drives home how … Read article “14: SVG Icon System – Building Out Defs” -
13: SVG as an Icon System – The `use` Element
Read ArticleSVG has a very cool and powerful element called
<use>. It’s pretty simple in concept. It finds another bit of SVG code, referenced by ID, and clones it over inside the<use>element.The most basic use case would be: I’ve already drawn this shape(s) once on the page, and I want to draw it again someplace else. Go get that shape(s), and draw it again.
We can use that ability as the root concept for (drumroll!) and entire … Read article “13: SVG as an Icon System – The `use` Element”
-
Article
Icon System with SVG Sprites
Read ArticleI’ve been a big proponent of icon fonts. Lots of sites really need a system for icons, and icon fonts offer a damn fine system. However, I think assuming you’re good with IE 9+, using inline SVG and the
<use></use>element to reference an icon is a superior system.First let’s cover how it works.… Read article “Icon System with SVG Sprites”
Search Results
There are many many thousands of pages on this site. Searching is... probably a good idea.
210 Articles
Monthly Mixup
Monthly Sponsor
Thanks, Mailchimp!
Integrate your user and marketing data with 200+ popular business apps.
