Fabulous Blogging

Decoding the Blog Scene One Post at a Time

  • Get Started
  • Work with Me
  • My Other Blog!
You are here: Home / Design / How to Design With Icons

How to Design With Icons

Have you ever visited a website and just loved it so much even though there wasn’t anything new that you learned? Likewise, are there websites you go to because the content is good, but you find yourself annoyed or clicking off after a few minutes of reading?

That’s because design matters.

It’s would be better to have no design at all instead of a bad design. You must focus on the details of color, layout, and typography.

Design within the content matters as well. The difference between a giant block of text vs. being well-formatted can equal the success or failure of a website.

And of course, we all know that images matter too. But not just photography – icons as well.

In fact, icons are everywhere online. Just go to Facebook.

icons

Imagine this page without the icons?

Screen Shot 2015-09-27 at 6.16.55 PM

Just those simple little images help make the text pop. Without it, you would glaze over the columns and have trouble retaining the information. So here’s how you find icons for your website and then use them strategically.

 

Creative Market

Creative Market – If you look under the GRAPHICS header, you’ll see one called Icons. Then sort price low to high. Look for icons that come in PNG format if you don’t have Photoshop or Illustrator {which many beginners don’t}. When you find one you like, it’ll download as a zip file {on some browsers} so you’ll have to double-click to uncompress it. Inside the folder should be PNG versions of your icons.

I’m going to pretend I’m designing for a mom blogger who writes all about how to save money.

A post about her favorite cost-cutting habits could look like this:

  1. I love to collect coupons from the weekly newspaper.
  2. I collect flyers and price compare before leaving the house.
  3. I do all my shopping at Walmart because of price matching.

But what if I used icons?

COUPONI love to collect coupons from the weekly newspaper. You can ask your neighbors if they aren’t using theirs.

pigI collect flyers and price compare before leaving the house. This way I know what stores are carrying the best deals.

pricematchI do all my shopping at Walmart because of price matching. All I do is show them the flyer, and they reduce the price.

 

If you don’t want to pay for icons

If you can’t bear to spend even a few dollars, Canva has some great free icons you can use. The nice thing about these is that you can edit them to be the sites colors.

1. Click on Custom Dimensions.

2. Set it to 48×48.

Custom_Dimensions_–_Untitled_design

3. Click on Icons. When you choose one, you can click the + button and set the color to be the exact color code that you need. If you don’t know the colors, get a color picker Chrome extension and it will allow to see what the six-digit color code is of any color on a site.

canva

4. Then download it.

5. Erase the image and grab your next one. Do the same process and download it.

Keep repeating until you have all the icons you’d like!

I love to collect coupons from the weekly newspaper. You can ask your neighbors if they aren’t using theirs.

I collect flyers and price compare before leaving the house. This way I know what stores are carrying the best deals.

I do all my shopping at Walmart because of price matching. All I do is show them the flyer, and they reduce the price.

 

PicMonkey

PicMonkey also has icons. You’ll have to have the Royale subscription if you want access to all of them.

  1. You start by choosing the Design Option.
  2. When the canvas opens up, set it to transparent.
  3. Resize the canvas to 48 x 48.
  4. Click on the butterfly, which has all the overlays.
  5. I made a checkbox in my brand colors.

Photo_editor___PicMonkey__Free_Online_Photo_Editing

PicMonkey Icons

I love to collect coupons from the weekly newspaper. You can ask your neighbors if they aren’t using theirs.

I collect flyers and price compare before leaving the house. This way I know what stores are carrying the best deals.

I do all my shopping at Walmart because of price matching. All I do is show them the flyer, and they reduce the price.

 

The Noun Project

There are icons for everything on this website. Just plug in your noun and it’ll spit out an icon. This is a great option if you need obscure icons….

eggplantLike eggplant.

hungerOr hunger.

You can buy them for $1.99 a piece or get a subscription for $10.00 a month. Thousands of icons at your disposal for whatever you need! Be careful on this website – you may waste hours just looking through them all.

Icons are a great {and easy} way to spruce up lists and posts. It breaks up the text, keeps the reader visually engaged, and drives home your client’s message.

So glad you found me!

julie laughing smallHi! My name is Julie and I am the founder, writer, and designer behind Fabulous Blogging. I run this site as an extension of my full-time digital marketing business-- which includes coaching, classes, and consulting. My passion is to help people make their businesses thrive online. Thanks for stopping by!

Search this site

Julie Chenell | 2016-2024 All Rights Reserved | Don't Steal It | Privacy Policy