Social Web Icons

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.

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.