Skip to main content
CSS is fun and cool and I like it.
Article

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 being nice, cohesive, and practical sets of icons, I find it interesting that literally all of them:

  • are SVG, and thus easily resizeable
  • are built with rather efficient <path> elements
  • are stroked instead of filled (at least optionally)
  • have a
Read article “Some New Icon Sets”
Link

System UIcons

Article

SVG Title vs. HTML Title Attribute

You know the title attribute? I can do this:

<div title="The Title"I'm a div with a `title`
</div

And now if I’m on a device with a mouse pointer and hover the cursor over that element, I get…… Read article “SVG Title vs. HTML Title Attribute”

Link

Hamburger ☰ Heaven

Link

css.gg

Article

Maskable Icons: Android Adaptive Icons for Your PWA

There is a new web feature called maskable icons that is coming soon to Firefox Preview and other web browsers. This new icon format will let your PWAs have their own adaptive icons on Android.
Article

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 other than the CSS file.
  • Using the background-size property, 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
Read article “Creating a Maintainable Icon System with Sass”
Article

Do you need an ICON ONLY button without screwing up the accessibility?

The first consideration is: do you really? If you can, having text next to your icons is proven over and over again to be the most accessible and clearest UX (see Apple’s latest blunder). But if you need to (and I get it, sometimes you need to), Sara Soueidan and Scott O’Hara have a pair of articles that nicely lay out all the options and present actual research on this topic.

Read article “Do you need an ICON ONLY button without screwing up the accessibility?”
Link

Control Icons with Font Size

Link

Accessible SVG Icons With Inline Sprites