Textured Icons with Icon Stacks

A couple days ago I posted a brief article on what I call Icon Stacks–an easy way to create complex multi-color icons using icon fonts. Today I wanted to share another interesting use for Icon Stacks that I came up with: Textured Icons.

So historically if you wanted to create a textured icon, you were most certainly relegated to using some sort of image for your icons. This often meant recreating existing icons in photoshop and then applying texture brushes, etc. to get the look you were going for. If you wanted to use these icons at different sizes you, you’d have to rinse and repeat for each individual size…lame.

I Want Scalable Texture

No worries, Icon Stacks can help with that too, just create a couple of texture icons and add them to your icon font:

Now pair those with your expected .icon-base and you’ve just created a distressed or stamped feeling Icon Stack without having to write any extra code. This is where Icon Stacks start to yield dividends, when you can easily re-use the markup pattern to create interesting combinations.

<i class="icon-stack icon-size-64">
    <i class="icon icon-smile icon-stack-base"></i>
    <i class="icon icon-texture-1"></i>
</i>