Todd Wolfson

Software Engineer

March 22, 2016

When designing my business card, I had an epiphane about when to use filled icons vs when to use hollow icons.

  • If the design is content dense, then we should use a filled icon
  • If the design is content light, then we should use a hollow icon
  • If the content is in between, then either should work but the icons should be consistently filled or hollow
  • Hollow icons should use the same stroke width (i.e. be consistent)

I'm uncertain if this is a hard and fast rule. In programming, the answer is almost always "it depends" and there are rarely simple problems/solutions.

But let's look at some examples:

Examples

Dense content

Filled icons (better):

Dense content with filled icons

Hollow icons (worse):

Dense content with hollow icons

Light content

Hollow icons (better):

Light content with hollow icons

Filled icons (worse):

Light content with filled icons

Icons consistently filled or hollow

Consistently hollow icons (better):

Consistently hollow icons

Inconsistent filled and hollow icons (worse):

Inconsistent filled and hollow icons

Hollow icon stroke width

Same stroke width (better):

Hollow icons with same stroke width

Different stroke width (worse):

Hollow icons with different stroke width

Attribution

Filled email:

Hollow email:

Filled phone:

Hollow phone:

  • Derived by Todd Wolfson

BLOKK font (used for dense content):

Top articles

Develop faster

Removing the tedium from creating, developing, and publishing repos.

Sexy bash prompt

A bash prompt with colors, git statuses, and git branches.

Recent articles

Testing the Invisible

How to test/prevent elements invisibly blocking other elements