Social Web Icons

This guest playground piece from Adam Fairhead at Fairhead Creative is a great example of resolution-independent, future-thinking iconography. Plus, they're pretty.

How to use Them

Each icon is designed to be used as the background of an anchor, and each icon has its own class as well as a couple of global classes. They are all set to be inline, so you can put them up against each other, in line with your text, or in any kind of layout or construct.

To use an icon, create an anchor and give it a class of .fc-webicon, as well as a class for the social network or service you want to represent. For example, Facebook would look like this:

<a href="#" class="fc-webicon facebook">Like us on Facebook</a>

You can then specify a size as well (.small and .large). The beautiful thing is those sizes are just CSS, not additional assets. Since the images are resolution-independent SVG files they can be scaled to any size, large or small, and they maintain that clarity on any kind of screen (including Retina screens). Pretty nifty.

<a href="#" class="fc-webicon facebook small">Like us on Facebook</a>
<a href="#" class="fc-webicon facebook">Like us on Facebook</a>
<a href="#" class="fc-webicon facebook large">Like us on Facebook</a>

Each icon is very clearly and reliably named. Hover on any of the icons on this page to see what their class is when you add it to an anchor.

Small Icons

Behance Creative Cloud Dribbble Dropbox Evernote Flickr Github GooglePlus iCloud LinkedIn Mail MSN Pinterest Rdio RSS Skitch Skype Spotify StumbleUpon! Vimeo YouTube YouVersion Zerply Pocket App

Regular Icons

Behance Creative Cloud Dribbble Dropbox Evernote Flickr Github GooglePlus iCloud LinkedIn Mail MSN Pinterest Rdio RSS Skitch Skype Spotify StumbleUpon! Vimeo YouTube YouVersion Zerply Pocket App

Large Icons

Behance Creative Cloud Dribbble Dropbox Evernote Flickr Github GooglePlus iCloud LinkedIn Mail MSN Pinterest Rdio RSS Skitch Skype Spotify StumbleUpon! Vimeo YouTube YouVersion Zerply Pocket App

Why SVG Icons?

When you consider how common ultra-high resolution screens have become and couple that with the ubiquity of low-bandwidth mobile connections it becomes clear that we need to start really exploring and using alternate image methods. Since they are defined by vector shapes and colors rather than bitmaps, SVG files can be much smaller than a comparable PNG or JPG while also supporting any arbitrary size. Adam did a great job putting together a series of refined, vibrant icons that rely on modern browser support for SVG (with small PNG fallbacks).

SVG images are still somewhat poorly understood and underutilised — our hope is that playground pieces like this will start to really illustrate their value and lead to greater understanding and adoption (starting with our own understanding).

Ready to try them out? You can download the icons on their own directly from the Github repo, or download them already inserted into an example Foundation page.

Download the Icons Download with Foundation 3

Quick Start

You can grab the code pack that includes all of the icon files as well as an example page in Foundation 3 to show you how they're used.

Download the Icons Download with Foundation 3

Watch or report issues on Github.

Works with Foundation

These sweet icons work perfectly in Foundation, and are a great way to handle this sort of content in a resolution-independent way. Check out Foundation to see what else you can do with a responsive framework.

Visit Foundation

Available on GitHub

Find the latest code on Github, or go there to log / search through any issues. You can pop it open right in GitHub for Mac, here »

Thoughts?

Read our blog post for more background on why Adam developed this, to see what others are saying, or to let us know what you think.

Score an awesome product engineering or design job

via Job Board from ZURB

Startup playground

Log in with your ZURB ID

Log in with Google

Don't have a ZURB ID? Sign up

Forgot password?
×

Sign up for a ZURB ID

Sign up with Google

Already have a ZURB ID? Log in

×