Articles Tagged icons

This is a great collection of icons by Corey Ginnivan that’s both free and with no attribution required when you use them. The style is super simple. Each icon looks like older versions of the icons from macOS to me because they’re cute but not too cute.… Read article “System UIcons”

A pleasant little romp through iconography and culture from Sophia Lucero. The “hamburger” menu icon we’re familiar with now is really a sign from Taoist cosmology.

Besides ☰, which represents heaven 天, we have ☱ for lake/marsh 澤, ☲ for fire 火, ☳ for thunder 雷, ☴ for wind 風, ☵ for water 水, ☶ for mountain 山, and ☷ for ground 地.

We shouldn’t be using it for a menu icon, but it makes me wonder if we ought to … Read article “Hamburger ☰ Heaven”

I’m not sure what to call these icons from Astrit Malsija. The title is “500+ CSS Icons, Customizable, Retina Ready & API” and the URL is “css.gg” but they aren’t really named anything.

Anyway, their shtick is:

The 🌎’s first icon library designed by code.

The idea is that they don’t use clip-path, they aren’t icon fonts, they aren’t even SVG. They are just <i> tags essentially using the shapes of CSS and pseudo elements as necessary to draw … Read article “css.gg”

Here’s a nifty trick from Andy Bell that now seems a little obvious in hindsight: if you set an SVG to have a width and height of 1em then you can change the size of it with the font-size property.

Try and change the font-size on the body element below to see the icon scale with the text:

See the Pen
Font size controlled icon by Andy Bell (@andybelldesign)
on CodePen.

You pretty much always want your … Read article “Control Icons with Font Size”

This is a great look at accessible SVG markup patterns by Marco Hengstenberg. Here’s the ideal example:

<button type="button">
  Menu
  <svg class="svg-icon"
     role="img"
     height="10"
     width="10"
     viewBox="0 0 10 10"
     aria-hidden="true"
     focusable="false">
     <path d="m1 7h8v2h-8zm0-3h8v2h-8zm0-3h8v2h-8z"></path>
    </svg>
</button>