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

Articles Tagged
svg icons

24 Articles
{
,

}
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 Dec 29, 2020)
Direct link to the article Super Tiny Icons
SVG svg icons

Super Tiny Icons

Direct Link

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
Shared by Chris Coyier on Nov 30, 2020
Direct link to the article SVGBOX
SVG svg icons

SVGBOX

Direct Link

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
Shared by 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
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
Direct link to the article Change Color of SVG on Hover
SVG svg filters svg icons

Change Color of SVG on Hover

There are a lot of different ways to use SVG. Depending on which way, the tactic for recoloring that SVG in different states or conditions — :hover, :active, :focus, class name change, etc. — is different. …

Avatar of Chris Coyier
Chris Coyier on May 13, 2019
Direct link to the article Inline SVG… Cached
cache service workers svg icons

Inline SVG… Cached

I wrote that using inline <svg icons make for the best icon system. I still think that’s true. It’s the easiest possible way to drop an icon onto a page. No network request, perfectly styleable.

But inlining code has …

Avatar of Chris Coyier
Chris Coyier on Apr 12, 2019 (Updated on Oct 28, 2020)
Direct link to the article Making SVG icon libraries for React apps
react SVG svg icons

Making SVG icon libraries for React apps

Direct Link

Nicolas Gallagher:

At Twitter I used the approach described here to publish the company’s SVG icon library in several different formats: optimized SVGs, plain JavaScript modules, React DOM components, and React Native components.

There is no One True Way©…

Avatar of Chris Coyier
Shared by Chris Coyier on Dec 14, 2018
  • 1
  • 2
  • 3
  • Older
Our Learning Partner
Frontend Masters logo
Frontend Masters

Need front-end development training?

Frontend Masters is the best place to get it. They have courses on all the most important front-end technologies, from React to CSS, from Vue to D3, and beyond with Node.js and Full Stack.

CSS-Tricks is created by Chris and a team of swell people.

Keep up to date on web dev

with our hand-crafted weekly newsletter

Tech
  • WordPress (CMS)
  • Jetpack (Search, Backup)
  • WooCommerce (eCommerce)
  • Local (Development)
Hosting
  • Flywheel
Family
  • CodePen
  • ShopTalk Show
Minisites
  • The Power of Serverless
  • Upcoming Conferences
  • Coding Fonts
Contact
  • Email
  • Sponsorship Info
  • Guest Writing
Buy
  • Posters & Swag
  • Membership
Follow
  • Twitter
  • Instagram
  • YouTube
  • CodePen
  • GitHub
  • iTunes
  • RSS
Back to Top