How I Made an Icon System Out of CSS Custom Properties
SVG is the best format for icons on a website, there is no doubt about that. It allows you to have sharp icons no matter the screen pixel density, you can change the styles of the SVG on hover …
Articles Tagged
svg icons
27 Articles
7 Fresh Links on Performance For March 2022
I have a handful of good links to articles about performance that are burning a hole in my bookmarks folder, and wanna drop them here to share.…
Chris Coyier
on
Which SVG technique performs best for way too many icons?
Tyler Sticka digs in here in the best possible way: by making a test page and literally measuring performance. Maybe 1,000 icons is a little bit of an edge case, but hey, 250 rows of data with four icons in …
Shared by
Chris Coyier
on
Accessible SVG Icons
The answer to “What is the most accessible HTML for an SVG icon?” isn’t one-size-fits all, because what an icon needs to do on a website varies. I’m partial to Heather Migliorisi’s research on all this, but I can summarize. …
Chris Coyier
on
(Updated on )
Super Tiny Icons
A bunch of SVG icons (of popular things) all under 1KB. SVG is awesome for golfing.
I was going to add a CodePen logo but there is already one in there at 375 Bytes. I’ve got one at 208 …
Shared by
Chris Coyier
on
SVGBOX
I’ve been saying for years that a pretty good icon system is just dropping in icons with inline <svg> where you need them. This is simple to do, offers full design control, has (generally) good performance, and means you aren’t …
Shared by
Chris Coyier
on
Some New Icon Sets
I’ve bookmarked some icon sets lately, partly because I can never find a nice set when I need to. I figured I’d even go the extra mile here and blog them so I can definitely find them later. Aside from …
Chris Coyier
on
A Font-Like SVG Icon System for Vue
Managing a custom collection of icons in a Vue app can be challenging at times. An icon font is easy to use, but for customization, you have to rely on third-party font generators, and merge conflicts can be painful to …
SVG, Favicons, and All the Fun Things We Can Do With Them
Favicons are the little icons you see in your browser tab. They help you understand which site is which when you’re scanning through your browser’s bookmarks and open tabs. They’re a neat part of internet history that are capable of …
Eric Bailey
on
(Updated on )
Add Background Colors to SVGs Using the “rect” Element
The advantages of using SVGs in web development are well known. SVGs are small in size, can be made quite accessible, are scalable while maintaining their quality, and can be animated. Still, there is a learning curve. Things, like …
Creating a Maintainable Icon System with Sass
One 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
Tracy Rotton
on
(Updated on )
