Introducing Gov Webicons

June 4, 2013 | I’m currently working on creating a website that needs NASA’s logo (the “meatball” — don’t ask) in the upper corner. With the upcoming swarm of resolution independence due to high DPI screens and a multitude of screen resolutions, just including a standard JPG or PNG image just doesn’t cut it anymore. SVG icons allow you […]

I’m currently working on creating a website that needs NASA’s logo (the “meatball” — don’t ask) in the upper corner. With the upcoming swarm of resolution independence due to high DPI screens and a multitude of screen resolutions, just including a standard JPG or PNG image just doesn’t cut it anymore. SVG icons allow you to include an image that scales as big or small as you need it, without any loss in image quality (and often smaller than a comparable image in PNG or JPG).

After doing some research on SVG images on the web, I came across FC Webicons, a set of social media icons presented in SVG with PNG fallbacks for older browsers that don’t support SVG images. As that code is open source, I adopted it to present NASA’s logo in a futuristic, resolution independent way…but decided, hey, it was so much fun, why stop there?

I’m happy to introduce today Gov Webicons, a set of 41 federal agency icons that you can use on your website with just two lines of code. Creating a dashboard of agencies? Include them all. Want to just update your own agency’s icon? Take out just the code and images you need and have fun living in the future.

Gov Webicons is open source and hosted on GitHub. I’d love to include additional federal agencies and can do so as long as there is a publicly available SVG version of their graphic online. Any tips on improving Gov Webicons or ideas for more agencies to add? Drop me a line in the comments below, I’d love to hear your thoughts!

In short: be nice and add to the discussion. If you continually violate this policy, we may limit your ability to comment in the future. If you have any questions or comments about this policy, please contact us.

shepazu

Very cool! Thanks for doing this!

Brent Smith

Hey Sean! Your post is actually related to something I found this morning…Purely CSS Logos. This might help as you would reduce the time even if SVG support isn’t there. Granted, I don’t know much about SVG yet, I think this CSS way is quite good. Here’s the link: http://www.bchanx.com/logos-in-pure-css-demo

Enjoy!
Brent

http://open.nasa.gov Sean Herron

Hey Brent!

That page was originally my inspiration to start looking at this. Ultimately, I think the NASA meatball is a bit too complex to do in CSS right now since it has so many shapes and objects in it, plus a unique font. But it would definitely be cool to see it done!

Sean

A collaborative approach to open, direct and transparent communication about your space program