The Blog Icons

This is a collection of high quality vectorial icons to represent common ideas and actions of the blogosphere.

They were based on the SVG work from FeedIcons.com. The base button is the same, but mathematically simplified on the XML level. New buttons were added based on other popular icons found on the web or created by myself. Also some redesign was made for new shapes to make the icons look better when exported to smaller image sizes.

By the way, I am not a designer nor an artist. I just know how to use SVG-creation tools as Inkscape or make good XML. Or I just have a blog demanding for these icons. So I’m sure people can contribute better color mixings an outlines. Let me know and lets integrate your ideas into this project in the right way.

Please share alike this icons. They have a Creative Commons license. I appreciate if you can link to my blog when using them.

Icons for Feed and OPML

Feed IconThese icons where the base for this work, specially the feed icon as found in its website. They were probably created with proprietary tools such as Adobe Illustrator and then exported to open formats such as SVG or PNG. The original OPML icon can be found at opmlicons.com

OPML IconThe versions here are visually identical to the original ones, but mathematically simplified. They are now being maintained in an open format — SVG — here, and are a better option because of its open source code and formats, and distribution.

Icons for Trackback and Share

Trackback and Pingback IconThese icons can be found sometimes in the blogosphere. I don’t know who designed them but they are a good representation of the Trackback and Pingback ideas.

The Share icon is not my preferred but for now it is just a copy of what can be found around.

Share IconColors and shapes are identical and based on the feed icon button. I never saw these icons in a size bigger than 16×16 pixels. Now, in a scalable format, they can be rendered at any size you want.

Permalink IconThese are original creations and come in several options. I am still not sure which one is the best. You can also suggest other shapes.

As you can see, I am using this icon to identify that each section on this post has a permalink.

Other Icons

Comment Icon Edit Icon Cancel Icon Tag Icon Download Icon Clock Icon

Other original icons: Comments, Edit, Cancel, Tag, Download, Upload and Clock (to represent date and time). I’m open to suggestions for better shapes.

Challenges for Icon Sizes

The original design of these icons (from feedicons.com) looks wonderful on sizes bigger than 22 pixels, but most people will use them on small sizes as 16×16. So this package delivers also shape design that look better on small sizes as 22×22, 16×16, etc. I am using these sizes all around my blog as you can see.

Converting the SVG Files into Images

In the Blog Icons ZIP file you will find the XML:SVG source code for all icons. Additionally you will get all icons in PNG (preferred), GIF and JPG formats, in common sizes from 10×10 to 128×128 pixels. If you want a specific size, you can import the source SVG file in some graphical tool as Inkscape (on Linux), or CorelDraw, Adobe Illustrator, etc and export them into any format and size you want.

Or use the Makefile like this (on Linux you will need Inkscape and ImageMagick installed):

Make all default sizes of all icons, in PNG, GIF and JPG:

bash$ make all

Make Feed icon in GIF format, at 40×40 pixel size:

bash$ make SIZE=40 feed.gif

Make all icons, all formats at 40×40 pixel sizes:

bash$ make SIZE=40

52 thoughts on “The Blog Icons”

  1. these look great! SVG is a really good thing, too 😀
    shouldn’t the license be GPL as well, since it’s based on the feed icon?

  2. About the license of those icons: you say in this page and in the README file “they have a Creative Commons license” which is not enough, not all CC licenses are equally free.
    One have to open the file to examine the metadata to learn the freedom is limited: Attribution-NonCommercial.

  3. Looks great, I’d like to use these when I redo my theme one of these days (I’d been thinking about some from the Nuvola set before). I’ve got no problem with attribution in the CSS and on my about page, is that sufficient? And my blog runs ads so I don’t know if that’s too commercial for CC Attribution,Non-Commercial.

    Anyhow, they look pretty and I like the idea of getting some common icons out there so readers know what they’re looking at. Good work.

  4. 1) Second on email icon.
    2) Please consider using GPL for license.
    3) Thank you for your great work!

  5. Blog Icons for Vista are available in resolutions of 16×16, 20×20, 24×24, 32×32, 48×48, and 256×256 pixels. The icons come in both 256 colors and True Color, and are available in ICO, PNG, GIF, and BMP formats.

  6. Vector graphic element is really useful for present web designers. In my blog of GFXBD.COM you can find more vector graphics, swf animation wallpapers and other multimedia that a web designers may look for. There are some tutorials and articles too and everything is free to download.

  7. I’ve been looking for icons in square form (I need 22×22 size) which reference a wide range of web sites, not just social sites or sharing sites. Constructing icons for all the various websites people might need links or desktop shortcuts to would be a huge task. I’d have thought someone would have done this already and made them available (even for pay). Yet I still find none but a small few set of websites, or specially styled ones (like the ones that look like postage stampts while looking like the site logos).

Leave a Reply

Your email address will not be published. Required fields are marked *