Brands Icons And Color Style Guides (100 Icons, PNG, CSS)

Advertisement

Another weekend, and yet another freebie. Today, we are happy to feature a useful icon set, the Simple Icons1 by Dan Leech. Dan’s set contains 100 PNG icons for popular websites, apps and organisations, all in eleven sizes (16, 24, 32, 48, 64, 128, 256, 512, 1024, 2048 and 4096 pixels squared).

The white icons have transparent backgrounds, which makes them ridiculously simple to style with CSS. As a bonus, simpleicons.org102 maintains a list of official background colour values that can be used in conjunction with the icons, thoroughly researched and derived from official branding guidelines of each brand.

release3
Larger view4.

Download the set for free!

preview5
Large preview6 (1000×2467), Full-size preview7 (1628×4016).

Behind the design

Here are some insights from the designer himself:

“Even though the future of Web iconography will clearly be dominated by resolution-independent formats like SVG and icon fonts, there will still be many uses for a set of simple, flexible, high-quality raster icons. That’s what I set out to achieve with Simple Icons. The set is still very much a work in progress. I plan to refine and grow the set as time goes on.”

Thanks for your fantastic work and your contribution, Dan!

Footnotes

  1. 1 http://simpleicons.org/
  2. 2 http://simpleicons.org
  3. 3 http://www.smashingmagazine.com/wp-content/uploads/2013/02/release@2x.png
  4. 4 http://www.smashingmagazine.com/wp-content/uploads/2013/02/release@2x.png
  5. 5 http://www.smashingmagazine.com/wp-content/uploads/2013/02/preview@2x.png
  6. 6 http://www.smashingmagazine.com/wp-content/uploads/2013/02/preview@2x.png
  7. 7 http://www.smashingmagazine.com/wp-content/uploads/2013/02/preview-fullsize.png
  8. 8 https://github.com/danleech/simple-icons/archive/master.zip
  9. 9 https://github.com/danleech/simple-icons
  10. 10 http://simpleicons.org

↑ Back to topShare on Twitter

The Smashing team loves high-quality content and cares about the little details. Through our online articles, Smashing Books, eBooks as well as Smashing Conferences, we are committed to stimulating creativity and strengthening the web design community’s creative forces.

Advertising

Note: Our rating-system has caused errors, so it's disabled at the moment. It will be back the moment the problem has been resolved. We're very sorry. Happy Holidays!

  1. 1

    Fantastic!!!

  2. 2

    These icons are.. Glorious!! I really do love them!

  3. 3

    Beautiful, thanks!

  4. 4

    Neat! Definitely adding this to my collection. Thanks!

  5. 5

    amazing! and thank you!! :D

  6. 6

    Awesome, Thank you !

  7. 7

    Jason Occhipinti

    March 10, 2013 9:05 pm

    These are absolutely awesome! Thank you Dan for putting these together!

  8. 8

    Nice!!

    Thanks so much.

  9. 9

    This is by far the best set I have seen yet, AAANNNDDD its the most up to date! Thanks so much Dan!!!

  10. 10

    Wow wow wow!

    Simple yet so very elegant.

    Thanks for the share.

    Definitely going straight to my toolbox.

    Bravo!

  11. 11

    Thanks for the comments – you’re all very welcome. If you have any icons you’d like to see added please head over to the GitHub repo and leave a note in the Issues section. 100 icons is just the beginning!

  12. 12

    Nommm nommm!!

  13. 13
  14. 14
  15. 15

    Thank you very much SM :)

  16. 16

    Yet another great icon set that doesn’t include even the biggest Chinese social media brands. At least Sina and QQ. I mean, come on. *sigh*

  17. 17
  18. 18

    they look so sharp, and so good. thank you!

  19. 19

    How do you get around the issue of brand usage guidelines?

    From the Facebook Brand Resource Center:

    “While you may scale the size to suit your needs, you may not modify the “f” logo in any other way (such as by changing the design or color). If you are unable to use the correct color due to technical limitations, you may revert to black and white.”

    https://www.facebook.com/brandpermissions/logos.php

    It seems most people just ignore this stuff.

    • 20

      I was wondering this as well. Surely some of the brands’ legal teams could have a field day if we use these?

    • 21

      Simple answer: If you’re really worried about breaking the rules, don’t use these icons.

      Unlike myriad icon sets of this ilk I actually did consult the brand guidelines where available. In many cases they helped me determine the most appropriate icons and colours to use. Facebook is an interesting case where their guidelines conflicted with my own (centred, monochrome, 30% padding etc). I made the judgement to proceed against the recommendations of the official brand guidelines, thereby keeping my icon set consistent.

      Of course that leaves any one who uses these icons open to take-down requests from trademark owners, though given the number of high-profile websites that use non-compliant icons (*ahem* Smashing Magazine) I don’t believe you’ll have a problem.

      • 22

        Hi Dan,

        Thanks for the explanation. From my perspective the main thing is explaining to people as to what they are getting into so they can make an informed decision. In this case, at least one (Facebook) of the icons violates the brand usage guidelines. The article description for this makes it sound like all of these icons have been checked and cleared brand usage guidelines.

        Now will the brand police come after you if you use these? Probably not. However it impacts where I would use the icons. I’d happily use them on my personal projects but I’d definitely double-check (explain the implications) before using them in a project for any client that is sensitive to details like this.

  20. 23

    I relly like this icon …… thanks for upload ..

  21. 24

    There’s no DeviantART icon…

  22. 25

    Pure Awesome! Thanks!

  23. 26

    I think this is my favorite set of all time! AMAZING!!

  24. 27

    Thanks for sharing these, they are very nice!

    I really like them all lined-up together too, so I guess I still have about 90 websites where I have to register so I can create a ‘Social Rainbow’ on my website ;)

  25. 28
  26. 29

    Matthew Sprankle

    March 12, 2013 9:27 pm

    This is perfect for a developer’s resume, portfolio, explanation of languages used in clients work… too many reasons these are awesome. Thank you!

  27. 30

    Great job! Thanks for sharing

  28. 31

    A vector version of these logos would be so much more useful and about 100 times lighter to download, plus could be converted into a font… Any chance that’s available somewhere?

    :D happy st pats day !

    b r e n t

  29. 32

    Dave Cornett (@snowarchitects)

    March 18, 2013 1:29 pm

    superb and simple, love them

  30. 33

    Thx guys. searched like forever for somethin’ ike this. :)

  31. 34

    ya its nice and very usefull to us Thank u so much..!

  32. 35

    Thank youuuuu :)))

  33. 36

    I love this set. Great job! :)

  34. 37

    Thanks a lot! Wonderful.

  35. 38

    UPDATE: All of these icons now have black-colored counterparts. To download these please visit the Github page…

  36. 39

    great.
    amazing icons for website social bar
    thanks

  37. 40

    Very nice set, thanks,-

  38. 41

    Anyone else having trouble getting the icons colored like that? The ZIP only contain black and white versions and the layers are locked, so they can’t be edited.

    Sorta disappointing. :/

  39. 42

    Pretty cool Icons ! Thank you very much for sharing

  40. 43

    I LOVE THE PERSON WHO INVENTED SMASHING MAGAZINE

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top