Find the Best Food Icons for your Restaurant Website
Got a restaurant website in need of some spice? These free food icons and restaurant clipart packs will help you out. Read on for tips on where to find the best icons, when to use them and how to avoid legal limbo with dubious icon sets.
When to use icons
Before I jump into the list of free food icon resources, let’s get one thing straight. Icons aren’t right for everyone. They’re illustrations, typically line-art or colorful drawings. Back in the old days we would have called them food clipart. That means restaurant icons are best for fun, family-friendly restaurants, or off-beat cafes with a light-hearted character. If you’re a more up-scale restaurant, a quiet dining experience or a serious bistro, you should use them sparingly. And be sure to stick to plain, single-color icons that can attract attention without being too playful.
A great way to use food and restaurant icons is to flag important content on your site. Research has shown people scan websites rather than read them, so an icon can help attract attention to a particular place. Smashing Magazine has a great article with examples of how you can use this technique to enhance your website’s design.
You can also use them to convey important information about your restaurant menu. My Plate Up WordPress theme is designed for modern, refined websites, so I’ve kept the icon use to a minimum. But you can see how the theme’s menu uses the icons from my Food and Drink Menu Pro plugin to convey dietary information, like free-range meat, Halal and Kosher food, vegetarian options and more.
Where to look for the best food icons
Run a quick Google search for “food icons”. Go ahead, I’ll wait. If you did it, you’ll see there are tons of places to find them. But not all icons are the same. Some are distributed under non-commercial licenses. Some of the big sites don’t even indicate the license. For instance, click on any of the icon sets at all-free-download.com and look closely. You’ll notice many don’t have any license information and those that do typically say you need to pay for commercial use.
You don’t want to end up investing time and effort into a website with icons that you might have to remove later.
200 Foodie Pack
This great pack from freepik.com has tons of clever and fun food icons for you. It comes in vector and raster versions, so it’s easy to use even for non-designers. (Not sure what vector and raster mean? Read below.)
flaticon
You’ll find tons of useful icons and vector art in their Food category here. Each food icon is listed and can be downloaded separately. Most of the icons are licensed for commercial use provided you attribute the author, but make sure to check before you download. It’s right there when you open an icon. Lots of different options available for vector and raster versions, including Base64 output!
Hand Drawn
It’s right there in the name, but these icons provide a nice human touch with a hand-drawn style. Great for indie restaurants and cafes that want a more personal feel. (Available in vector .eps format.)
RoundIcons.com
I’d be sad if I left these guys out. You’ll need to pony up $99 for them, but it’s worth it for these amazing multi-color icons. To find the restaurant icons, you’ll need to scroll through their 1,500 icons to get to the Sweets and Drinks, Food and Drinks, and Party sets.
Raster, vector, what? Finding the best icon format
Not sure whether you need raster or vector icons? Here’s a quick what’s what run-down:
Rasterized Images
Rasterized images are what you’re familiar with. They’re JPGs, PNGs and GIFs. If you’re a novice who just wants to upload an image here or there, you’ll want to get the rasterized version of the icons. Look for PNG files. They’ll be the best for you in most cases.
Vector Images
Vector images use a line and vector technique so that they can be created once, but easily blown up to any size. You’ll probably need Photoshop to render them or you’ll need to learn how to use SVG formats in your CSS code. But if you’re a designer and know what you’re doing, these are the best versions for you. Look for SVG, AI or Base64 options.
Base64
This is a special one. Using a neat CSS trick, you can actually encode a small icon directly into your CSS rules. Check out this post from CSS Tricks for more details. Of the resources above, you’ll only find Base64 versions at flaticon.
PSD
You might come across some icon packs that say they’re available as PSD files. You’ll need an image editor, like Photoshop or Gimp, to open and access these icons. And you’ll need to know how to export them to a web-friendly format, like PNG.
What’s missing?
With so many icons out there, you might be surprised to learn that none of them effectively address dietary concerns. You won’t find a good free set out there that covers icons for vegetarian, Kosher, free-range, wholegrain, gluten free or other food icons needed for menus.
That’s why I created my own icon pack, which is available as part of my Food and Drink Menu Pro plugin. At the moment they’re only available as rasterized PNGs, but I’m working on making vector versions available. Check them out in the screenshots on this page.
