1. Freebies
  2. Icons
  3. Creative Commons Icon Sprite
Creative Commons Icon Sprite

Creative Commons Icon Sprite


Like a lot of designers, I find time-management to be tricky at times. That's why I constructed this Creative Commons icon sprite to easily handle project attribution in just 3 steps.

Efficiency is what allows you to focus your energy where it's most useful. Usually that means taking a step back and looking at how you conduct your day-to-day work. Attribution is one element that creative types often overlook, but with this quick and easy Creative Commons tutorial we'll show you how to make properly attributing your work a simple habit. Just select how you want your media treated, choose the coordinating license, and clearly post your attribution. We give you a tiny snippet of Creative Commons code to keep on hand so you can easily display their icons. Let those legal geniuses at CC handle all the "leaglease" just include your Creative Commons icon sprite and you'll have your rights covered.

If you're completely unfamiliar with Creative Commons give that link a quick read. The basic idea is that by using a standardized ruleset, we can simply protect our work. That's obviously not to say that legal professionals are never needed, but that a great deal of disputes can be avoided. These steps will allow folks to sleep a little easier knowing their projects are guarded in the way a creator sees fit. To a lot of us - Our projects are our babies. Proper attribution ensures that they're treated well.


Load your Creative Commons Icon Sprite

Start off by uploading the sprite image to your server and including this quick piece of CSS. Everyone has different methods of building clean sprites, so feel free to customize away. I'd recommend going through the first time with this ultra simple styling, then just go back and customize as necessary. You may notice that I've included an invisible image, since empty links are generally frowned upon. Here's the code to include...

.ccsmsticker { 
    width: 120px;height: 22px;
    background-image: url(images/smallcc.png);
    background-color: #fefefe;
    display: block;
    overflow: hidden; 
}
.ccsmsticker:hover { 
    background-color: #ffffff; 
}

.by { background-position: 0 0; } .by:hover { background-position: 120px 0; }
.bysa { background-position: 0 22px; } .bysa:hover { background-position: 120px 22px; }
.bynd { background-position: 0 44px; } .bynd:hover { background-position: 120px 44px; }
.bync { background-position: 0 66px; } .bync:hover { background-position: 120px 66px; }
.byncsa { background-position: 0 88px; } .byncsa:hover { background-position: 120px 88px; }
.byncnd { background-position: 0 110px; } .byncnd:hover { background-position: 120px 110px; }

This will render you a 120px x 22px box with a slightly darker rollover. Customize that container's styling to your liking. If you need something larger, I've also included a 240px x 44px box & image inside the zip at the end of this brief tutorial.


Select the Appropriate Creative Commons Code

Select the license you would like to use or visit the Creative Commons License page if you need a hand - http://creativecommons.org/choose. Selection is easy - Do you want your name tied to it, can folks "remix" it, etc. Just use the included code examples to clearly mark your license and you've done your due diligence in terms of attribution. Here's how those html codes would look...

  • <a class="ccsmsticker mby" href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons Attribution 3.0 Unported License">Creative Commons Attribution 3.0 Unported License</a>
  • <a class="ccmedsticker mbync"href="http://creativecommons.org/licenses/by-nc/3.0/" title="Creative Commons Attribution-NonCommercial 3.0 Unported License">Creative Commons Attribution-NonCommercial 3.0 Unported License</a>
    Creative Commons Attribution-NonCommercial 3.0 Unported License
  • <a class="ccmedsticker mbyncnd" href="http://creativecommons.org/licenses/by-nc-nd/3.0/" title="Creative Commons Attribution-NonCommercial 3.0 Unported License">Creative Commons Attribution-NonCommercial 3.0 Unported License</a>
    Creative Commons Attribution-NonCommercial 3.0 Unported License
  • <a class="ccmedsticker mbyncsa" href="http://creativecommons.org/licenses/by-nc-nd/3.0/" title="Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License">Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License</a>
    Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License
  • <a class="ccmedsticker mbynd" href="http://creativecommons.org/licenses/by-nd/3.0/" title="Creative Commons Attribution-NoDerivs 3.0 Unported License">Creative Commons Attribution-NoDerivs 3.0 Unported License</a>
    Creative Commons Attribution-NoDerivs 3.0 Unported License
  • <a class="ccmedsticker mbysa" href="http://creativecommons.org/licenses/by-sa/3.0/" title="Attribution-ShareAlike 3.0 Unported (CC BY-SA 3.0)">Attribution-ShareAlike 3.0 Unported (CC BY-SA 3.0)</a>
    Attribution-ShareAlike 3.0 Unported

That's it. Worlds easiest Creative Commons tutorial.

You should still use your brain when it comes to rights and nothing covers you 100%, but Creative Commons attribution just makes life easier. It's certainly relieved me of a fair amount of headaches over the last few years. Besides defining legal ownership, it also gives us all a basic set of rules to work from. In an industry where your hard work can be stolen with the click of a mouse, it's nice to have some general rules that we can all work from. If you've never used Creative Commons before - Try it out. I'm sure you'll become a fan like us in no time.


Nerd Bonus - Customize that CC Icon

If you're a little obsessive (and aren't we all), I've included a full size PSD file into the project notes so you can do a little color coordinating if you want to. Just make sure to retain the CC logo guidelines. You wouldn't want to get sued by Creative Commons for copyright infringement... That'd be just too ironic for words.

View Demo Download
Creative Commons Sprite
Bite-Sized...
More Legibleā€¦


Related Articles
  • Beautiful CSS3 Button Set
    A concisely coded CSS3 button set increases usability across the board, gives you a ton of options, and keeps all the code involved to an absolute minimum.
    Beautiful CSS3 Button Set
  • Clean Custom Google Maps Icons
    We created a set of clean custom Google Maps icons to make your website's map a little cooler. We've also included a Google Maps icon vector & variously colored custom icon PNGs so you can coordinate them with your own designs.
    Clean Custom Google Maps Icons
  • Creative Commons Basics
    This guide to using Creative Commons will cover all the Creative Commons basics - Selecting an attribution type, A detailed Creative Commons attribution example & factors in identifying Creative Commons vs copyright situations.
    Creative Commons Basics
  • Optimizing Development Workflows
    Efficient workflows and workflow patterns are key to effective web development. Learn how to streamline your workflow with this web development tutorial.
    Optimizing Development Workflows
  • The Best Wireframe Tools / Wireframe Apps
    Bridging the gap between your vision and a clients idea usually takes a few tools. Use one of the best wireframe tools on the market and you'll go a long way in bridging that gap.
    The Best Wireframe Tools / Wireframe Apps
  • Waterproof GUI Elements | Volume One
    Light texture, rounded edges, and smooth sliders are all the rage lately - I blame Google. This set of Waterproof GUI elements is built to be just as minimal, but also give that plastic feel that boaters should find very familiar.
    Waterproof GUI Elements | Volume One
Written By:
Matthew Haeck

Greetings, I'm the lead designer and resident full stack web developer at Haeck Design. A majority of my time is spent creating beautiful logos, websites, print design, & staying up to date on all the tricks of the web development trade. (Matthew Haeck Bio Page)

Haeck Design - Stamp Logo