Looking for advice on adding icons to my design


I have been asked to design a site for a local GP, to raise awareness of their work.

I have all the content and have started to think about the design.

I saw a really cool icon set from here:

These could be reall useful, and they look great.

I was looking for some input/ideas on how I could possbily add this to the navigation, or how I could implement them into my design?

Any input appreciated.

The method of adding these to your navigation would greatly depend on how you do your navigation. If you code your navigation yourself, you should know how to include the images. If you use a menu program, it may or may not allow images.

Implementing these with your design would be possible if you showed your design here so those with a feel for design could see how the icons might fit into the overall plan.

If I were building a site for a GP that has an X-ray room, there is a nice x-ray looking image that would fit as a navigation button.

So post some more information about what you plan and maybe you will get some really good responses.

I’d probably put each icon to the left of the text of my navigation items and then put them in the top left of each page.

So if you clicked the link with the syringe icon, you would be taken to a page with the syringe icon in the top left corner.

Also, those big icons could come in handy for a universal navigation bar at the bottom of every page. It could be like a dock on an Apple Mac.

You could also create some simple but really nice rollover effects with these. The static state could be just as they are, but the rollover could include some sort of a rectangle or square behind it (or even a reflection of some kind if you are really good with Photoshop).

Do you have a mockup of the site yet? Maybe if we can see it we can offer more focused advice.

Yes, as others have said, how to include the icons in the design depends on the layout you are aiming for. Including them in a menu might be quite different from appending them to links, for example.

I will get to work on it now and post something up soon! :slight_smile:

Cool, looking forward to seeing it.

Ok, I just pulled something together just now very quickly…


The navigation is in the early stages and could be a lot better, but at the minute looks a bit messy.

The problem is leaving enough space for the text to be on the button and not on the icon. Because of this my button has lots of space on the end. Not sure how to make it all even.

I think you’ve gone about it pretty well. Perhaps just adjust the left and right padding, adding to the left and reducing the right.

Thanks man, I did it late in the day and was on a machine too long. Looking forward to having a go again tomorrow with fresh eyes.

I will report back!