Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
apple Fix apple logo dimensions May 30, 2013
dropbox Fix dropbox dimensions May 30, 2013
evernote Add evernote May 29, 2013
facebook Fixes for facebook and github logos May 30, 2013
github Fixes for facebook and github logos May 30, 2013
linkedin Add linkedin May 29, 2013
twitter Add twitter May 29, 2013
LICENSE.md Add license May 29, 2013
README.md Update readme May 30, 2013
banner.png Update banner May 30, 2013
demo.html Add demo May 30, 2013



Logos In Pure CSS

Company logos created in pure CSS, built in less.
See it in action here: bchanx.com/logos-in-pure-css-demo


The easiest way to use these icons is to import the corresponding .less file in your own .less styling sheet:

@import "relative/path/to/logos-in-pure-css/twitter.less";

You can also link the stylesheet via .html (but you'll need a copy of less.js, tested on > v1.3.3):

<link type="text/less" rel="stylesheet" href="/path/to/logos-in-pure-css/twitter.less">
<script type="text/javascript" src="/path/to/less.js"></script>

If you prefer not to use less, you can use the .css file provided:

<link type="text/css" rel="stylesheet" href="/path/to/logos-in-pure-css/twitter.css">

Once imported, copy the accompanying logo .html into your own .html file and the icon should display!

<div class="logo-twitter-{{ size }}">                                      
  <div class="body"></div>
  <div class="body-none"></div>
  <div class="beak-bottom"></div>
  <div class="beak-bottom-none"></div>
  <div class="wing-bottom"></div>
  <div class="wing-bottom-none"></div>
  <div class="wing-middle"></div>
  <div class="wing-middle-none"></div>
  <div class="wing-top"></div>
  <div class="wing-top-none"></div>
  <div class="beak-top"></div>
  <div class="beak-top-none"></div>
  <div class="head"></div>

To see it this in action, open demo.html in your browser.


By default, {{ size }} supports two different keywords: large and small. This in turn produces a 300x300px or 52x52px icon.
If you're using less, you can modify the sizes by either changing the @radius param, or by defining your own class and calling the logo mixin() with your desired @radius size.

Currently, the .css file only supports large and small icon sizes.


This software is free to use under the MIT license.