Skip to content
Zocial button set with CSS. Entirely vector-based social buttons.
CSS HTML JavaScript
Find file
Latest commit 4cb5a72 @zimbatm zimbatm Release v1.2.0

Zocial CSS social buttons

I basically rewrote this entire set so they are full vector buttons, meaning:

  • @font-face icons
  • custom font file for all social icons
  • icon font use private unicode spaces for accessibility
  • em sizing based on button font-size
  • support for about 83 different services
  • buttons and icons supported
  • no raster images (sweet)
  • works splendidly on any browser supporting @font-face
  • CSS3 degrades gracefully in IE8 and below etc.
  • also includes generic icon-less primary and secondary buttons


How to use these buttons

<button class="zocial facebook">Button label here</button>


<a class="zocial twitter">Button label</a>
  • Can be any element e.g. a, div, button etc.
  • Add class of .zocial
  • Add class for name of service e.g. .dropbox, .twitter, .github
  • Done :-)

Check out for code examples.

There's also a LESS version from @gustavohenke here

Problems, questions or requests to @smcllns


This project is available on CDNJS:

How to contribute

  1. Install Font Custom
  2. Add new font in the src/ folder.
  3. Set color settings in the templates/zocial.css file.
  4. Run fontcustom compile
  5. Update the sample.html file with both the button and icon.
  6. Test rendering. If broken go to step 2.
  7. Send pull-request !


Under MIT License

Something went wrong with that request. Please try again.