Spacing around Icons

How much white-space should I leave around an Icon that I create?

For example, let’s say that I create a “Star” icon to be used on a webpage that is 10px by 10px.

I would think you’d want a small amount of white space around it - almost like Margins/Padding in CSS - but I don’t know what is “Not Enough” or “Too Much”?!

(If I had to guess, for a 10px by 10px star icon, I’d say maybe 2-3 pixel white-space margin…)

Any suggestions?

And is there maybe a “formula” to use in other situations?

Sincerely,

Debbie

Well, if it are icons just for the design, it doesn’t matter too much.

But if it must be clickable icons, then the usability comes around the corner.
Try to hover over the different 10x10 icons (they have already 5px space between, not 2-3 pixel), and imagine you have to click on 1 of them:

[CENTER]

[U]stars-10x10-space-5px.png[/U][/CENTER]

That’s asking quite a lot of fine motorics. :rolleyes:
Especially if you have a high resolution monitor with small pixels! - And mobile devices with touch screens are another story…

For the usability for the average mouse user the icons have to be at least 15x15px I think, and have a clickable area of at least 3 à 4px around them. That is about 7px between 2 icons.

[CENTER]

[U]stars-area27x30-space-7px.png[/U][/CENTER]

Here the “Fitts’ Law” is playing:

But proof & pudding: a test page on screen can tell everything. :slight_smile:

These days we have to consider touch screens (such as tablets and mobiles, where you finger touch the interface rather than point with a mouse). Like it or not, many people access sites via these now. The general guidance is to give the user a clickable area of some 40x40px. Sounds a lot, but you try to click some of the tiny icons you find all over the web (including here) with your finger, and I defy you not to grind your teeth in frustration.

I was wrong in my OP. It looks like the Red Flag I have been using is 20 by 22 pixels. (Not exactly gigantic, but bigger than 10 x 10!)

What do you think about how Gmail and Yahoo Mail implement the “Important Message” column using a Star?

Is the Star big enough - at least for desktop users?

Sincerely,

Debbie

BTW, Francky…

When I asked about the margin around an Icon, I was actually more interested in the Top/Bottom Margin, because…

a.) I think I already have a decent sense that you need “elbow room” between items

b.) Since this is for a Sprite, and since Sprites can be as big as you want and yet not take up actual space, I would think a person would want to be “generous” with the spacing between Icons on a Sprite, right?

But what about the Top/Bottom Margins?

One extreme would be to have No Top/Bottom Margins, and just have spacing between each Icon Left/Right…

That would make life easier when it comes to figuring out how big to build things. And I suppose you can always use Margins/Padding in CSS to give you more Top/Bottom room if needed, right?

See what I mean?

Sincerely,

Debbie