Skip to main content
CSS is fun and cool and I like it.
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

Link

Emojis as Icons

Link

Extinct & Endangered

Article

How Can I Make My Icon System Accessible?

Here’s a question I got the other day?

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.

Read article “How Can I Make My Icon System Accessible?”