Menu Search
Jump to the content X X
Smashing Conf San Francisco

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf San Francisco, dedicated to smart front-end techniques and design patterns.

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

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, Simple Icons 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. [Content Care Dec/02/2016]

You may also want to check out the following Smashing Magazine articles:

release4
Larger view5.

Download the set for free! Link

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

Behind the design Link

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 Link

  1. 1 http://simpleicons.org/
  2. 2 https://www.smashingmagazine.com/2009/03/how-to-use-icons-to-support-content-in-web-design/
  3. 3 https://www.smashingmagazine.com/2016/02/free-icon-sets-e-commerce-web-hosting-food-science-and-more/
  4. 4 https://www.smashingmagazine.com/wp-content/uploads/2013/02/release@2x.png
  5. 5 https://www.smashingmagazine.com/wp-content/uploads/2013/02/release@2x.png
  6. 6 https://www.smashingmagazine.com/wp-content/uploads/2013/02/preview@2x.png
  7. 7 https://www.smashingmagazine.com/wp-content/uploads/2013/02/preview@2x.png
  8. 8 https://www.smashingmagazine.com/wp-content/uploads/2013/02/preview-fullsize.png
  9. 9 http://provide.smashingmagazine.com/Freebies/simple-icons-master.zip
  10. 10 https://github.com/danleech/simple-icons
  11. 11 http://simpleicons.org

↑ Back to top Tweet itShare on Facebook

Advertisement

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.

  1. 1

    Fantastic!!!

    2
  2. 2

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

    2
  3. 3

    Beautiful, thanks!

    4
  4. 4

    Neat! Definitely adding this to my collection. Thanks!

    3
  5. 5

    amazing! and thank you!! :D

    2
  6. 6

    Awesome, Thank you !

    0
  7. 7

    Jason Occhipinti

    March 10, 2013 9:05 pm

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

    3
  8. 8

    Jolomi Otumara

    March 10, 2013 9:47 pm

    Nice!!

    Thanks so much.

    0
  9. 9

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

    1
  10. 10

    Wow wow wow!

    Simple yet so very elegant.

    Thanks for the share.

    Definitely going straight to my toolbox.

    Bravo!

    0
  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!

    1
  12. 12

    Nommm nommm!!

    0
  13. 13

    Sweeeeet !!

    0
  14. 14

    Thank you very much SM :)

    0
  15. 15

    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*

    0
  16. 16

    Fantastic:)))

    0
  17. 17

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

    0
  18. 18

    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.

    2
    • 19

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

      0
    • 20

      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.

      2
      • 21

        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.

        1
  19. 22

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

    -1
  20. 23

    There’s no DeviantART icon…

    0

↑ Back to top