<!DOCTYPE html>
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="UTF-8">
<title>Stackicons - Icon Fonts for Web Designers</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="description" content="Stackicons are icon fonts for web designers with added flexibility, including multiple button shapes and a unique multi-color option. Free and open source, Stackicons-Social includes finely-crafted icons for over 60 social brands. The Stackicons project is by Parker Bennett, a web designer and front-end developer based in Los Angeles.">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-title" content="Stackicons">
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta property="og:title" content="Stackicons">
<meta property="og:site_name" content="Stackicons">
<meta property="og:image" content="http://stackicons.com/og-image.png">
<meta property="og:image:type" content="image/png">
<link rel="SHORTCUT ICON" href="favicon.ico">
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="apple-touch-icon-152x152.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72.png">
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-57x57.png">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="css/stackicons-min.css" media="screen" type="text/css" />
<link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
<style>
</style>
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<div class="page-wrap">
<header>
<div class="wrap">
<h1><a class="stackicons-logo text-left" href="http://stackicons.com"><span></span>Stackicons</a></h1>
<h2 class="nobr">Doing More with Icon Fonts</h2>
<nav class="nav-top st-shape-icon st-single-color-brand">
<ul>
<li><a title="Twitter" class="st-icon-twitter" href="https://twitter.com/stackicons">Twitter</a></li>
<li><a title="Facebook" class="st-icon-facebook-alt" href="https://facebook.com/stackicons">Facebook</a></li>
<li><a title="Github" class="st-icon-github-alt" href="http://github.com/parkerbennett">Github</a></li>
<li><a title="Email" class="st-icon-email" href="mailto:parker@stackicons.com"><span></span>parker@stackicons.com</a></li>
<li><a class="button github">Fork Me on GitHub</a></li>
</ul>
</nav>
</div> <!-- end .wrap -->
</header>
<section class="hero">
<div class="wrap clearfix">
<div class="hero-icons">
<a class="st-icon-dribbble st-multi-color st-shape-icon" href="http://dribbble.com/parkerbennett"><span></span>Dribbble</a>
<a class="st-icon-github st-multi-color st-shape-icon" href="http://github.com/parkerbennett"><span></span>Github</a>
<a class="st-icon-gmail st-multi-color st-shape-icon" href="mailto:parker@stackicons.com"><span></span>Email</a>
<nav class="twitter-row st-multi-color">
<a class="st-icon-twitter st-shape-square" href="https://twitter.com/stackicons">Twitter</a>
<a class="st-icon-twitter st-shape-rounded1" href="https://twitter.com/stackicons">Twitter</a>
<a class="st-icon-twitter st-shape-rounded2" href="https://twitter.com/stackicons">Twitter</a>
<a class="st-icon-twitter st-shape-rounded3" href="https://twitter.com/stackicons">Twitter</a>
<a class="st-icon-twitter st-shape-circle" href="https://twitter.com/stackicons">Twitter</a>
<a class="st-icon-twitter st-shape-icon" href="https://twitter.com/stackicons">Twitter</a>
</nav>
</div> <!-- end .hero-icons -->
<div class="intro">
<p><strong>Stackicons</strong> are icon fonts for the web, designed to do <span class="nobr">more —</span> <span class="nobr-wide">with multiple</span> button shapes and <span class="nobr">a unique</span> <span class="nobr">“multi-color”</span> option. <span class="nobr-wide">The <strong>Stackicons-Social</strong></span> font and <span class="nobr-wide">Sass-based</span> construction kit are free and open source, created by <a href="http://parkerbennett.com" class="nobr">Parker Bennett</a>.</p>
<a class="button download">Download it Free</a>
</div> <!-- end .intro -->
</div> <!-- end .wrap -->
</section> <!-- end .hero -->
<section class="news">
<div class="wrap clearfix">
<section class="news-content">
<h2>News</h2>
<p class="lede">To kick off the site launch, I wrote an article about Stackicons for <a target="_blank"><strong class="nobr">CSS-Tricks.</strong> <span class="nobr">Check it out!</span></a></p>
</section>
<section class="signup">
<!-- Begin MailChimp Signup Form -->
<div id="mc_embed_signup">
<form action="http://stackicons.us3.list-manage1.com/subscribe/post?u=a1d9b151d29974948b4cdcff9&id=7b1b8c2871" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<label for="mce-EMAIL">Updates?</label>
<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required>
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;">
<input type="text" name="b_a1d9b151d29974948b4cdcff9_7b1b8c2871" value="">
</div>
<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button">
</form>
</div>
<!--End mc_embed_signup-->
</section><!-- end .signup -->
</section><!-- end .news-content -->
</div> <!-- end .wrap -->
</section> <!-- end .news -->
<section class="callout-panels clearfix">
<div class="wrap">
<div class="callout-panel-group">
<div class="callout-panel panel1">
<h2>Finely Crafted</h2>
<p><strong>Stackicons-Social</strong> includes over 60 up-to-date icons for modern social brands — <span class="nobr">from App.net</span> to Zerply. Each icon was meticulously crafted to look great at multiple sizes, with five different button shapes, from square to circle, or <span class="nobr">icon-only.</span></p>
<nav class="nav-social icons-panel1">
<ul>
<li><a class="st-icon-twitter st-shape-r0"></a></li>
<li><a class="st-icon-facebook st-shape-r1"></a></li>
<li><a class="st-icon-googleplus st-shape-r2"></a></li>
<li><a class="st-icon-youtube st-shape-r3"></a></li>
<li><a class="st-icon-pinterest st-shape-r4"></a></li>
<li><a class="st-icon-instagram st-shape-r5"></a></li>
</ul>
</nav>
</div> <!-- end .panel1 -->
<div class="callout-panel panel2">
<h2 class="nobr">Easy to Customize</h2>
<p>Want to change the default button shape and color style, adjust colors or more? Just change the variables in the Sass construction kit files. <span class="nobr">You can</span> also override with built-in styles. <a class="nobr" href="examples.html" target="_blank">See some examples</a>.</p><p class="nav-list st-shape-icon"><a class="st-icon-codepen">Try it on CodePen</a></p>
</div>
</div><!-- end .callout-panel-group -->
<div class="callout-panel-group">
<div class="callout-panel panel3">
<h2>Colorful</h2>
<p>Stackicons <span class="nobr">stack —</span> using overlapping colors to create “multi-color” icons with a contemporary <span class="nobr">flat look.</span> (Think of two-color or screen printing.)
<!-- dribbble -->
<div class="st-demo"><span class="dribbble-1"></span><span class="dribbble-2"></span><span class="dribbble-3"></span><span class="dribbble-4"></span><b>→</b><a class="st-icon st-multi-color st-icon-dribbble-alt st-shape-icon"><span></span>Dribbble</a></div>
</div>
<div class="callout-panel panel4">
<h2>Free</h2>
<p>
<strong>Stackicons-Social</strong> is open source and <strong class="nobr">100% free</strong> for any use. <a class="nobr">Give it a try!</a></p>
<small><a href="https://spb.io/AY3rLlt5aG">Want to support the project?</a> Any amount would be a big help. <span class="nobr">As a</span> small thank you, I’ll send you <strong>Stackicons-Social-Complete</strong>, with a few more of my own <span class="nobr">custom icons.</small>
<a class="button darker contribute-button" href="https://spb.io/AY3rLlt5aG">Contribute</a>
</div>
</div><!-- end .callout-panel-group -->
</div> <!-- end .wrap -->
</section>
<section class="font-sample wrap">
<h2 class="font-sample-name">Stackicons-Social</h2>
<div class="control-font clearfix">
<div class="control-shape">
<a class="make-icon-only nobr active">icon-only</a><a class="make-square">square</a><a class="make-r1">rounded1</a><a class="make-r2">rounded2</a><a class="make-r3">rounded3</a><a class="make-circle">circle</a>
</div>
<div class="control-color"><a class="toggle-color active">multi-color</a>
</div>
</div>
<nav class="stackicons-font-sample st-multi-color st-shape-r5">
<!-- inline-block: comment-out white space
or don't close tags, or -5px margin-right -->
<a title="AddThis" class="st-icon-addthis">Add This</a>
<a title="App.net" class="st-icon-adn">App.net</a>
<a title="Amazon" class="st-icon-amazon"><span></span>Amazon</a>
<a title="Android" class="st-icon-android"><span></span>Android</a>
<a title="Apple" class="st-icon-apple">Apple</a>
<a title="Behance" class="st-icon-behance">Behance</a>
<a title="Blogger" class="st-icon-blogger">Blogger</a>
<a title="CodePen" class="st-icon-codepen">Codepen</a>
<a title="Delicious" class="st-icon-delicious"><span></span>Delicious</a>
<a title="deviantART" class="st-icon-deviantart"><span></span>Deviant Art</a>
<a title="Digg" class="st-icon-digg">Digg</a>
<a title="Dribbble" class="st-icon-dribbble"><span></span>Dribbble</a>
<a title="Dribbble" class="st-icon-dribbble-alt"><span></span>Dribbble</a>
<a title="Dropbox" class="st-icon-dropbox">Dropbox</a>
<a title="Ebay" class="st-icon-ebay"><span></span>Ebay</a>
<a title="Email" class="st-icon-email"><span></span>Email</a>
<a class="st-icon-email2">Email</a>
<a title="Evernote" class="st-icon-evernote">Evernote</a>
<a title="Facebook" class="st-icon-facebook">Facebook</a>
<a title="Facebook" class="st-icon-facebook-alt">Facebook</a>
<a title="Flattr" class="st-icon-flattr"><span></span>Flattr</a>
<a title="Flickr" class="st-icon-flickr"><span></span>Flickr</a>
<a title="Forrst" class="st-icon-forrst"><span></span>Forrst</a>
<a title="Foursquare" class="st-icon-foursquare"><span></span>Foursquare</a>
<a title="GitHub" class="st-icon-github"><span></span>Github</a>
<a title="GitHub" class="st-icon-github-alt"><span></span>Github</a>
<a title="Gittip" class="st-icon-gittip">Gittip</a>
<a title="Gmail" class="st-icon-gmail"><span></span>Gmail</a>
<a title="Gmail" class="st-icon-gmail-alt"><span></span>Gmail</a>
<a title="Google" class="st-icon-google">Google</a>
<a title="Google+" class="st-icon-googleplus">Google+</a>
<a title="IMDb" class="st-icon-imdb"><span></span>IMDb</a>
<a title="Instagram" class="st-icon-instagram"><span></span>Instagram</a>
<a title="Kickstarter" class="st-icon-kickstarter">Kickstarter</a>
<a title="Last.fm" class="st-icon-lastfm">last.fm</a>
<a title="LinkedIn" class="st-icon-linkedin">LinkedIn</a>
<a title="Microsoft" class="st-icon-microsoft"><span></span>Microsoft</a>
<a title="Myspace" class="st-icon-myspace">Myspace</a>
<a title="Pandora" class="st-icon-pandora">Pandora</a>
<a title="PayPal" class="st-icon-paypal"><span></span>Paypal</a>
<a title="PayPal" class="st-icon-paypal2"><span></span>Paypal</a>
<a title="Picasa" class="st-icon-picasa"><span></span>Picasa</a>
<a title="Pinboard" class="st-icon-pinboard">Pinboard</a>
<a title="Pinterest" class="st-icon-pinterest"><span></span>Pinterest</a>
<a title="Rdio" class="st-icon-rdio">Rdio</a>
<a title="Reddit" class="st-icon-reddit"><span></span>Reddit</a>
<a title="RSS" class="st-icon-rss">RSS</a>
<a title="ShareThis" class="st-icon-sharethis">ShareThis</a>
<a title="Skype" class="st-icon-skype"><span></span>Skype</a>
<a title="SlideShare" class="st-icon-slideshare"><span></span>Slideshare</a>
<a title="SoundCloud" class="st-icon-soundcloud">Soundcloud</a>
<a title="Spotify" class="st-icon-spotify"><span></span>Spotify</a>
<a title="StumbleUpon" class="st-icon-stumbleupon">Stumbleupon</a>
<a title="Stack Overflow" class="st-icon-stackoverflow"><span></span>Stack Overflow</a>
<a title="Tumblr" class="st-icon-tumblr">Tumblr</a>
<a title="Twitter" class="st-icon-twitter">Twitter</a>
<a title="Vimeo" class="st-icon-vimeo">Vimeo</a>
<a title="Vine" class="st-icon-vine">Vine</a>
<a title="Windows" class="st-icon-windows">Windows</a>
<a title="Windows 7" class="st-icon-windows7"><span></span>Windows 7</a>
<a title="Wordpress" class="st-icon-wordpress">Wordpress</a>
<a title="Xing" class="st-icon-xing"><span></span>Xing</a>
<a title="Yahoo" class="st-icon-yahoo"><span></span>Yahoo</a>
<a title="Yelp" class="st-icon-yelp"><span></span>Yelp</a>
<a title="YouTube" class="st-icon-youtube"><span></span>YouTube</a>
<a title="YouTube" class="st-icon-youtube2"><span></span>YouTube</a>
<a title="YouTube" class="st-icon-youtube-alt"><span></span>YouTube</a>
<a title="Zerply" class="st-icon-zerply">Zerply</a>
<a title="Search" class="st-icon-search">Search</a>
<a class="st-icon-search-alt"><span></span>Search</a>
<a title="Menu" class="st-icon-menu">Menu</a>
<a title="Menu" class="st-icon-menu-alt">Menu</a>
<a title="Menu" class="st-icon-menu-alt2">Menu</a>
<a title="More..." class="st-icon-more">More…</a>
<a title="Submenu" class="st-icon-triangle-down">More</a>
</nav>
<a class="toggle-ssmin">View Stackicons-Social</a>
</section> <!-- end .font-sample wrap -->
<p class="wrap"><small>*A smaller font, Stackicons-Social-Minimal, provides a subset of more commonly used icons.</small></p>
<section class="usage wrap">
<h2>Using Stackicons</h2>
<p><strong>Stackicons-Social</strong> comes with default CSS that you can link to or @import. There’s a usage guide to get you started, along with <a href="examples.html">some examples</a>.</p>
<p>If you’re comfortable using Sass, you can customize things extensively just by changing variables in the Sass construction kit files: brand colors, default size, shape and spacing, hover effects and more.<p>
<p>Questions? Suggestions? Need a custom icon font for your own project? <span class="nobr"><a href="mailto:parker@stackicons.com">Email me</a>.</span></p>
<a class="button button-small">Download it Free</a><a class="button darker button-small" href="https://spb.io/AY3rLlt5aG"> Contribute Now </a>
</section
</div> <!-- end .wrap -->
<footer>
<div class="wrap clearfix">
<div class="copyright">
<p>Copyright © <script language="JavaScript" type="text/javascript">document.write((new Date()).getFullYear());</script><noscript>2014</noscript> Parker Bennett.</p>
<p>Stackicons-Social is <a href="http://scripts.sil.org/cms/scripts/page.php?item_id=OFL_web" target="_blank">SIL Open Font</a> <span class="link-color">and</span> <a class="nobr"href="http://opensource.org/licenses/MIT" target="_blank">MIT licensed</a>.</p>
<p>All copyrights and trademarks are the property <span class="nobr">of their respective owners.</span></p>
</div>
<small class="right text-right">Hosting by <a href="http://mdtm.pl/1lTyAWF" target="_blank">Media Temple</a>.</small>
</footer>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery.js"><\/script>')</script>
<script>
$('.toggle-color').click(function () {
$(this).toggleClass('active');
$('.stackicons-font-sample').toggleClass('st-multi-color');
});
$('.make-square').click(function () {
$('.make-square, .make-r1, .make-r2, .make-r3, .make-circle, .make-icon-only').removeClass('active')
$(this).addClass('active');
$('.stackicons-font-sample').removeClass('st-shape-r0 st-shape-r1 st-shape-r2 st-shape-r3 st-shape-r4 st-shape-r5').addClass('st-shape-r0');
});
$('.make-r1').click(function () {
$('.make-square, .make-r1, .make-r2, .make-r3, .make-circle, .make-icon-only').removeClass('active')
$(this).addClass('active');
$('.stackicons-font-sample').removeClass('st-shape-r0 st-shape-r1 st-shape-r2 st-shape-r3 st-shape-r4 st-shape-r5').addClass('st-shape-r1');
});
$('.make-r2').click(function () {
$('.make-square, .make-r1, .make-r2, .make-r3, .make-circle, .make-icon-only').removeClass('active')
$(this).addClass('active');
$('.stackicons-font-sample').removeClass('st-shape-r0 st-shape-r1 st-shape-r2 st-shape-r3 st-shape-r4 st-shape-r5').addClass('st-shape-r2');
});
$('.make-r3').click(function () {
$('.make-square, .make-r1, .make-r2, .make-r3, .make-circle, .make-icon-only').removeClass('active')
$(this).addClass('active');
$('.stackicons-font-sample').removeClass('st-shape-r0 st-shape-r1 st-shape-r2 st-shape-r3 st-shape-r4 st-shape-r5').addClass('st-shape-r3');
});
$('.make-circle').click(function () {
$('.make-square, .make-r1, .make-r2, .make-r3, .make-circle, .make-icon-only').removeClass('active')
$(this).addClass('active');
$('.stackicons-font-sample').removeClass('st-shape-r0 st-shape-r1 st-shape-r2 st-shape-r3 st-shape-r4 st-shape-r5').addClass('st-shape-r4');
});
$('.make-icon-only').click(function () {
$('.make-square, .make-r1, .make-r2, .make-r3, .make-circle, .make-icon-only').removeClass('active')
$(this).addClass('active');
$('.stackicons-font-sample').removeClass('st-shape-r0 st-shape-r1 st-shape-r2 st-shape-r3 st-shape-r4 st-shape-r5').addClass('st-shape-r5');
});
$('.toggle-ssmin').click(function () {
$(this).toggleClass('active');
$('.font-sample-name').toggleClass('active');
$('.stackicons-font-sample .st-icon-addthis, .stackicons-font-sample .st-icon-amazon, .stackicons-font-sample .st-icon-android, .stackicons-font-sample .st-icon-apple, .stackicons-font-sample .st-icon-behance, .stackicons-font-sample .st-icon-blogger, .stackicons-font-sample .st-icon-delicious, .stackicons-font-sample .st-icon-deviantart, .stackicons-font-sample .st-icon-digg, .stackicons-font-sample .st-icon-dropbox, .stackicons-font-sample .st-icon-ebay, .stackicons-font-sample .st-icon-evernote, .stackicons-font-sample .st-icon-flattr, .stackicons-font-sample .st-icon-forrst, .stackicons-font-sample .st-icon-foursquare, .stackicons-font-sample .st-icon-gittip, .stackicons-font-sample .st-icon-google, .stackicons-font-sample .st-icon-imdb, .stackicons-font-sample .st-icon-kickstarter, .stackicons-font-sample .st-icon-lastfm, .stackicons-font-sample .st-icon-microsoft, .stackicons-font-sample .st-icon-myspace, .stackicons-font-sample .st-icon-pandora, .stackicons-font-sample .st-icon-paypal, .stackicons-font-sample .st-icon-paypal2, .stackicons-font-sample .st-icon-picasa, .stackicons-font-sample .st-icon-rdio, .stackicons-font-sample .st-icon-reddit, .stackicons-font-sample .st-icon-sharethis, .stackicons-font-sample .st-icon-skype, .stackicons-font-sample .st-icon-slideshare, .stackicons-font-sample .st-icon-soundcloud, .stackicons-font-sample .st-icon-spotify, .stackicons-font-sample .st-icon-stumbleupon, .stackicons-font-sample .st-icon-stackoverflow, .stackicons-font-sample .st-icon-vine, .stackicons-font-sample .st-icon-windows, .stackicons-font-sample .st-icon-windows7, .stackicons-font-sample .st-icon-wordpress, .stackicons-font-sample .st-icon-xing, .stackicons-font-sample .st-icon-yahoo, .stackicons-font-sample .st-icon-yelp, .stackicons-font-sample .st-icon-zerply, .stackicons-font-sample .st-icon-search-alt, .stackicons-font-sample .st-icon-menu-alt, .stackicons-font-sample .st-icon-menu-alt2, .stackicons-font-sample .st-icon-more').toggleClass('hide');
});
</script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-47890813-1', 'stackicons.com');
ga('send', 'pageview');
</script>
</body>
</html>