Smashing Magazine we smash you with the information that will make your life easier. really.

RSS: Best Design Practices And Icons

By Smashing Editorial, November 2nd, 2007 in Design Showcase | 161 Comments | Forum

RSS is extremely simple and yet so powerful. Not only does every weblog need it for content syndication; the number of RSS subscribers is a metric for weblog’s popularity and its success in the blogosphere. However, although millions do use RSS, hundreds of millions don’t. That’s no good news, since RSS offers a bunch of advantages that can boost your productivity and improve your information consumption in a quite elegant and easy-to-use way.

In this article we give an overview of what RSS is and present best design and usability-practices for design and placement of RSS-buttons on a web site. We also showcase dozens of free RSS-icons and provide you with references to related tutorials and how-tos.

Please notice that

you can find even more icons, buttons and design templates in our articles 20+ Free And Fresh Icon Sets, Freebies Round-Up: Icons, Buttons and Templates and in our Graphics category.

What is RSS?

RSS is basically a family of formats used to publish (not broadcast!) frequently updated content such as blog entries, news headlines or podcasts. The main advantage for users lies in the fact that they don’t have to keep up with their favorite web sites checking them manually. Instead, it is done in an automated manner so you get notified automatically once the sites are updated.

RSS content can be read using feed readers such as Bloglines or aggregators such as Netvibes. The user subscribes to a feed by entering the feed’s link into the reader or by clicking an RSS icon in a browser. The feed-reader checks the user’s subscribed feeds regularly for new content, downloading any updates that it finds — automatically.

To get an instant idea of how it is actually done you should take a look at RSS in Plain English which explains the basics of RSS in 3.5 minutes in Plain English.

RSS != XML

Since more and more users and bloggers indeed use RSS Syndication, it is gradually becoming a standard (or already is a de-facto-standard). This reflects in a number of approaches designers choose to animate their visitors for feed-subscription. The early feed-buttons have been labeled with “XML”, which is wrong, because this term stands not for the syndication format itself, but for the markup-language it uses. You can compare calling RSS-feeds XML with calling web sites HTML which obviously doesn’t really make any sense.

This is what it looked like few years ago (and in some cases still exists nowadays).

Source: cadenhead.org

Standard RSS-icon

RSS is used on most sites which are updated frequently; the format has also found its path in browsers and software applications. Therefore it’s reasonable to make sure that visitors can identify and recognize RSS quickly and easily. And this is why the standard RSS-icon is used in most cases.

The common RSS-icon

However, the Web is a creative place for experiments. Variations and modifications are common and interesting to observe. Creative designers come up with unusual solutions to integrate the RSS-button in their design and ensure that the overall site design is perfect.

The button itself doesn’t need to look like the standard RSS-button. For instance, it doesn’t need to have an orange color; shadows, frames and other visual effects can be used effectively to convey the message and attract visitor’s eye. What is important, however, is that despite all modifications the icon remains recognizable. This is not always the case.

If you’d like to use them you’ll find a quite comprehensive choice of possible variations offered for free download as icon sets. Before using them make sure you’ve read the license agreement carefully.

Ideas For RSS-Buttons

If you are a graphic designer you might find yourself in the situation where you’d like to risk some unusual solutions in order to provide your visitors with visually appealing designs. Please keep in mind: experiments can go wrong. You need to make sure that your button is recognizable, not that it simply looks good. After all, you want to find new readers instead of losing them.

Here are some examples of interesting uncommon solutions for RSS-buttons:

Nice, original, and in a different color. Greetings from Titanic.

Excellent placement of RSS-button - at the top of the page; and the design of the button fits to the overall design.

RSS-button in 3D-look. The design fits perfectly to the overall site design.

What about an RSS-icon with foot?

RSS-symbol is integrated into a notebook.

Blue variation, independent in the header.

An extended version of the button; you can download it as a vector template.

Shadows and background in use to put the button in the front.

A part of a navigation menu. Where is the grey zone between creativity and standard? In this case the original theme is hopefully still recognizable.

The design can also be completely different: actually this RSS-blimp on Zach Braff’s page is animated. However, new visitors will find it quite difficult to recognize it as an RSS-button. What is the purpose of such designs? To fit to the site layout or win new readers? It doesn’t matter for portfolio-pages where it’s all about creative design approaches, it is however essential for weblogs.

Not that impressive trend, but still very often used: huge, enormous, gigantic buttons which have to be recognized immediately. Extremely overused and not really user-friendly. If this trend persists at some point we’ll see designs with the biggest RSS button of the world.

Where To Place An RSS-Icon?

The most beautiful design doesn’t serve its purpose if the visitors of your web-site can’t find an easy way to subscribe to your feed. While some designers put an enormous RSS-icon in the middle of the page, the other ones place it at the bottom of the page making it harder for users to find it. The funny thing is that enormous RSS-buttons are indeed more effective.

If the feeds are properly declared in the source code, browsers recognize it and offer visitors a choice of available feeds. Besides, most browsers also use an auto detection-function to find the feeds automatically. Therefore visually appealing icons and buttons serve not only the purpose to animate visitors to subscriptions; they also point visitors’ attention to the fact that the subscription via RSS is available.

An optimal position for RSS-icons is the area that surrounds your logo and the top area of your site. The lower an RSS-icon is placed, the little subscribers you’ll be able to get.

Of course, the best position depends on the layout and design of the site. For instance, if the design is based only upon black and white, it’s enough to place an orange RSS-button in the sidebar. And if a site uses too many colors an RSS-icon at the top of the page won’t help, because users won’t be able to perceive at as a single design element. An optimal position can be determined with usability tests or heatmaps.

Real Live Button. Source: Flickr

Standard in variations: RSS-Icons For Free Download

Please notice that some of the references mentioned below have already been published in our Dr. Web Magazine in September. Brian from Designbliss used some of the references and expanded the collection with further icon-sets and tutorials in his article Over 35 Styles of RSS Icons. In this post we’ve taken a profound look at what is available on the Web and collected our best findings.

Social Bookmarks Icon Set
12 .png-icons, among them an RSS-icon.
Fresh Icons Pack
.png-icons, 256×256.
Browsing Dock Icons
Taking a look at RSS-buttons from another perspective. 3D Cartoons Icons Pack.
RSS News
2 RSS icons.
RSS-Icon: standard in variations
A number of RSS-button-templates by Dirk Metzmacher.
Web 2 Social Bookmarks
12 FastIcon-freeware “iPhone-like” icons of Web 2 Social Bookmarks. Among them — RSS button.
RSS Dock Icon
256×256, 512×512, .png-icons.
Web 2.0 style RSS buttons
Dock Icons
4 Icons by Valentina Olini
A collection of vector templates (Developer Kit) for standard-feed-icon including 14 Photoshop-templates (.psd) and 4 Adobe Illustrator-templates.
Free Glass Style RSS/Feed Icons
Feed-o-rama. 213 Icons, 8 sizes, a variety of formats: AI(5), EPS (16), SVG(1), PNG (64), JPG (128).
RSS Orb Icons
4 “orbital” RSS-icons.
Feedicons
34 Icons in 32*32 und 16*16 Pixels - .png.
3D Rss Feeds Icon
1 3D-icon in 4 sizes, by Dirceu Veiga.
Circle Feeds Icons
4 circular variations in 4 colors.
Zeusbox Feedicons
A set of RSS-icons.
Web 2.0 Icons
Include 48×48 and 32×32 RSS-buttons.
Feed icons for blogging guitarists
Guitar pick style. Get the PSD file or the PNG.
Icone Blog - Set 1
6 color variations included in a bigger set. Italian. Buongiorno Amici!
RSS Icon
This is one icon in 8 sizes. Is the RSS-symbol still recognizable?
30 Free Vector RSS Icons
How to mess with your readers
Two animated Feed-Icons.
DeviantArt has some quite creative work. Examples are petemh, nam0, carlnewton, leoparn, jb55 and again petemh.
Please notice that also wide-spread icon sets and templates such as FamFamFam Silk Icons and vector templates by GoSquared include RSS-buttons. Not all of them are included.

Make Yourself Your Own RSS-Button

If you’d like to create your own variation of an RSS-button you might find it useful to browse through some tutorials we’ve collected below.

Design a custom RSS feed icon
For Adobe Photoshop, by PixelHive.
Glassy & Vibrant RSS feed icon Tutorial
Vista Style for Adobe Photoshop
RSS Button Variations
The first is quite similar to traditional RSS buttons but it has a thick border that makes it look more like plastic.
Create a Vector RSS Icon
For Illustrator by Spoon Graphics.
Make your own RSS Feed icon
A Photoshop tutorial.
RSS Icons
A Fireworks tutorial.

Published in Design Showcase, November 2nd, 2007
Tags: buttons, free, icons, illustrator, rss, usability, xml

1.

Jason (November 2nd, 2007, 12:42 am)

great post…I was just working on the placement of a rss button today

-cheers
2.

Guido (November 2nd, 2007, 1:04 am)

Great selection of Icons.
I agree with you about the fact that design plays a very important roll in your subscriptions.
3.

Victoria Oldham (November 2nd, 2007, 2:37 am)

Great article, and I am still in the process of switching to the new “standard” icon. I was using the old orange “RSS” buttons, and now I’m having to track them all down and change them…for the sake of good communication with my visitors.
4.

Evangelist (November 2nd, 2007, 3:12 am)

Great list and, some nice inspiring designs as well.

Thanks
5.

Alex (November 2nd, 2007, 3:38 am)

Please use Atom. Applications support both for now, but Atom is better defined and has a richer content payload.
6.

Rick (November 2nd, 2007, 4:06 am)

I love the look of some of these…..Although the orb with the horizontal spiked lines I think deviates just a little to much.

Also i uploaded a zip file with a PSD, illustrator CS2 and illustratore file compliant with older versions of the icon, so it would be easier to customize without having to recreate it. You can find that Link [www.arcdesignnc.com] in case you would like to skip that step and jump right in.
7.

Rick (November 2nd, 2007, 4:16 am)

I love the look of some of these…..Although the orb with the horizontal spiked lines I think deviates just a little to much.

Also i uploaded a zip file with a PSD, illustrator CS2 and illustratore file compliant with older versions of the icon, so it would be easier to customize without having to recreate it. You can find that Link [www.arcdesignnc.com] in case you would like to skip the creation step and jump right in.
8.

Jorge I. Figueroa Sarcos (November 2nd, 2007, 5:26 am)

Incredible selection of Icons, nice work!
9.

turtie (November 2nd, 2007, 9:13 am)

Being a new blogger, this is valuable information!! In our ongoing quest to attract more traffic and increase readership, this post on RSS icon placement and style will certainly help. Great job. I will probably try some of these icons on my site!
10.

Ravi Vora (November 2nd, 2007, 1:25 pm)

Fantastic resource. I personally use the circle feed icon for my blog. I am thinking about personalizing it more to attract more RSS subscribers though. It seems that once people find my blog they like to sign up, it just needs to be more prominent.
11.

Armen (November 2nd, 2007, 4:14 pm)

Nice resource list…once again.

I use a custom made one to attract subscribers. In fact, I’m a little offend that you didn’t feature it ;) (joke)
12.

Martijn (November 2nd, 2007, 5:26 pm)

Nice icons gona use some one.
13.

Andy (November 2nd, 2007, 5:33 pm)

A good roundup but there’s one thing missing - put a rel=”alternate” link in the so that nice browsers will place an icon in the address bar. I never hunt for an orange icon on the page any more, I just glance at the address bar.

Not sure if the comment system will cope with an example, but here goes:
14.

Salis (November 2nd, 2007, 5:35 pm)

The best icon I have ever seen:

Link [www.papelcontinuo.net]

by Link [www.papelcontinuo.net]

Awesome!
15.

Gerd Wippich (November 2nd, 2007, 6:05 pm)

What a nice intro picture. I want such an RSS pillow for Xmas. Then I can get my RSS notifications when I m sleeping…
16.

Swift (November 2nd, 2007, 6:46 pm)

Wanted to say the same thing - The RSS pillow looks awesome! A great Christmas gift for people whom have interest in the internet field. And great list of rss buttons!

Swift
17.

Design Bliss (November 2nd, 2007, 9:12 pm)

Hi! Thanks for the link! BTW - This blog ripped off your post: Link [www.zaesar.com]
18.

Andrew Benton (November 3rd, 2007, 1:55 am)

Very nice article, I’ll probably chomp up one of these to use on my website.
19.

criticalerror (November 3rd, 2007, 5:36 am)

So much things to still

Just Joking!!!

Good work!
20.

Kicks Junkie (November 3rd, 2007, 7:21 am)

Awesome article. I will be using a couple of the free icons on a few new websites.
21.

Daniel (November 3rd, 2007, 7:08 pm)

I just love useful lists, and it looks like you guys are the best in gathering useful information.
22.

Sean (November 4th, 2007, 3:09 am)

Man…just THIS SECOND I was wondering if you guys had an article on RSS icons. Perfect timing!
23.

Jermayn Parker (November 5th, 2007, 1:34 pm)

Over at my blog I use a different style to show my rss off.

Its nice, big and different which hopefully will help interest people more…
24.

Richard (November 6th, 2007, 10:41 pm)

Very nice icons. It’s good to see high quality graphic design.
25.

Tom (November 6th, 2007, 11:49 pm)

Incredible collection! I love some of these icons, I’ve already downloaded many of them.
26.

Andy Towler (November 7th, 2007, 3:39 pm)

Fantastic - thanks for gathering these lovelies together in one place. One of them will definitely go on my blog. Only trouble is, choosing which one could take some time…
27.

Danny (November 8th, 2007, 3:56 pm)

Great post! If you wondering where that “Real Live Button” came from, it was a prop for a short video we produced to help explain RSS. You watch it at Link [www.youtube.com]
28.

Resonate (November 11th, 2007, 12:34 am)

A purely excellent article really is, this will great for future reference.
29.

killerog (November 13th, 2007, 1:35 am)

Great collection of rss icons! But where are the atom icons? :)
30.

Robert Marbun (November 20th, 2007, 1:17 pm)

OK, now I can have my guitar pick as RSS icon. Thanks!
31.

Pinyo (January 9th, 2008, 10:56 am)

Awesome designs!
32.

SyedZaeem (January 14th, 2008, 5:21 am)

I like the post, great collection and search :) thanks for sharing.
33.

Ivo (January 22nd, 2008, 6:38 am)

Brilliant sorting… all in one place, sometimes like today needed the rss icon but in a different shape, and I found it in here, thanks a lot. Keep it up

Cheers
34.

NiC (January 22nd, 2008, 4:08 pm)

Great list.. Verry useful :-)
Thanks!
35.

RV Blog (February 7th, 2008, 7:57 am)

Great post. We were looking for some ideas to spice up our blog. The ideas here look amazing!
36.

Cameron (March 8th, 2008, 9:26 am)

Nice selection. I made a few icons more recently so they never had a chance to make it in to this collection, but if anyone is after a few nice 80’s-neon style RSS logos… Link [www.cameronqueen.com], they’re free!
37.

Stryker (March 13th, 2008, 2:05 pm)

Great icons!
38.

viviana (April 29th, 2008, 9:27 am)

Great, great, great !!!
39.

Ajoka (May 27th, 2008, 3:54 am)

I want to put this on my web site Link [ajoka.com] can any one help me how i do????
40.

fulvius (June 16th, 2008, 10:15 am)

Link []
41.

Nick (October 6th, 2008, 12:00 pm)

Nice! There are also some cool rss icons on Link [] and they have original PSD too so you can modify them.

~Nick
42.

Lawrence (October 13th, 2008, 1:07 am)

Great resource. There is a Link [blog.iwebtoolsonline.com] which could generate rss icons with different colors and sizes.
43.

alfaridzy (December 14th, 2008, 1:08 am)

great !! beautiful
44.

james (December 28th, 2008, 2:08 pm)

This is lovely. Will love to try puttting on my web Link [www.echomusic.com.sg]. Thanks for sharing this info!
45.

jeandseen than (June 11th, 2009, 5:08 pm)

really good post