Skip to main content
CSS-Tricks
  • Articles
  • Alamanac
  • Guides
  • Videos
  • Books
  • Newsletter
Search

Articles Tagged
svg icons

27 Articles
{
,

}
Direct link to the article How I Made an Icon System Out of CSS Custom Properties
custom properties Sass SVG svg icons

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 …

Avatar of Louis Hoebregts
Louis Hoebregts on Sep 22, 2022 (Updated on Sep 28, 2022)
Direct link to the article 7 Fresh Links on Performance For March 2022
cloudflare next.js performance svg icons webpagetest

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.…

Avatar of Chris Coyier
Chris Coyier on Mar 2, 2022
Direct link to the article Which SVG technique performs best for way too many icons?
SVG svg icons

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 …

Avatar of Chris Coyier
Chris Coyier on Nov 23, 2021
Direct link to the article Accessible SVG Icons
SVG svg accessibility svg icons

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. …

Avatar of Chris Coyier
Chris Coyier on Dec 28, 2020 (Updated on Aug 3, 2021)
Direct link to the article Super Tiny Icons
SVG svg icons

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 …

Avatar of Chris Coyier
Chris Coyier on Nov 30, 2020
Direct link to the article SVGBOX
SVG svg icons

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 …

Avatar of Chris Coyier
Chris Coyier on Nov 12, 2020
Direct link to the article Some New Icon Sets
icons svg icons

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 …

Avatar of Chris Coyier
Chris Coyier on Sep 29, 2020
Direct link to the article A Font-Like SVG Icon System for Vue
svg icons vue

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 …

Avatar of Kevin Lee Drum
Kevin Lee Drum on Jul 24, 2020
Direct link to the article SVG, Favicons, and All the Fun Things We Can Do With Them
dark mode favicon media queries SVG svg icons

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 …

Avatar of Eric Bailey
Eric Bailey on Apr 24, 2020 (Updated on Feb 8, 2022)
Direct link to the article Add Background Colors to SVGs Using the “rect” Element
css for svg SVG svg icons

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 …

Avatar of Kate Holterhoff
Kate Holterhoff on Feb 20, 2020
Direct link to the article Creating a Maintainable Icon System with Sass
background-image icons Sass sass maps svg icons

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
…
Avatar of Tracy Rotton
Tracy Rotton on Aug 28, 2019 (Updated on Aug 3, 2021)
  • 1
  • 2
  • 3
  • Older

CSS-Tricks is powered by DigitalOcean.

Keep up to date on web dev

with our hand-crafted newsletter

DigitalOcean
  • About DO
  • Cloudways hosting
  • Legal stuff
  • Get free credit!
CSS-Tricks
  • Write for us!
  • Advertise with us
  • Contact us
Social
  • RSS Feeds
  • CodePen
  • Mastodon
  • X
Back to Top