Grow your CSS skills. Land your dream job.

How to make your icons crisp?

  • # January 6, 2013 at 2:44 pm

    Hi there,

    A friend of mine had made some icons for me in Illustrator, vector format. The size is 22 x 22. The icons are really blurry. Do you have any tips on how to get them crisp?

    [http://www.gotmedia.org/back-rings-light.jpg](http://www.gotmedia.org/back-rings-light.jpg “http://www.gotmedia.org/back-rings-light.jpg”)

    [http://www.gotmedia.org/back-rings-thicker.png](http://www.gotmedia.org/back-rings-thicker.png “http://www.gotmedia.org/back-rings-thicker.png”)

    For example, these icons are even smaller and really crisp:
    [http://www.smashingmagazine.com/2013/01/06/freebie-gemicon-icon-set-600-psd-source-png/](http://www.smashingmagazine.com/2013/01/06/freebie-gemicon-icon-set-600-psd-source-png/ “http://www.smashingmagazine.com/2013/01/06/freebie-gemicon-icon-set-600-psd-source-png/”)

    How were those done?

    # January 6, 2013 at 3:18 pm

    Well, for one, you should be using either an svg or png format when adding them to your site. Not jpg.

    You should make them at least double the size you’ll be using them at. This is for retina and also for scaling if you need to. Proper placement of points is important as well.

    # January 6, 2013 at 3:44 pm

    Icons can only be crisp if they are drawn from start to finish “crisp”. Trying to edit an already made icon that isn’t “crisp” will prove difficult if you’re not familiar with pixel-perfect drawing. Pixel-perfect is exactly like it sounds. It’s color/shape is dead to the pixel, no fallout color. (Or whatever the proper terminology is!) This is the best way to achieve crispy icons, creating “pixel-perfect” drawings. Search for it. It’s basically like using the pencil tool in Photoshop instead of the brush tool. Even if Hardness is 100% on a brush in Photoshop, doesn’t mean it’s dead to the 1px brush you’ve set, whereas the Pencil tool will be.

    If your friend made it in illustrator, he should send you a larger version than 22×22, considering illustrator is vector-based, it can be scaled to absolutely any size. Then in return, you scale it down in “Constrained” proportions and it should be crisp.

    I zoomed right in to that icon you’re talking about and the pixel color spread is everywhere. Had you edited this before you uploaded it?

    # January 6, 2013 at 4:06 pm

    @JamesMD Lol, It’s going to look pixelated when zooming in. It’s a png not svg.

    # January 6, 2013 at 4:10 pm

    Haha, I know,I’m talking about the brown pixels on the left and right. If this is the direct sent icon file from the friend she’s talking about, it should be clear, unless it’s a traced image. :)

    # January 6, 2013 at 7:29 pm

    Steph, the icons need to be ‘pixel hinted’. Here’s a video explaining the process: http://methodandcraft.com/videos/pixel-hinting-vectors-in-photoshop

    # January 7, 2013 at 3:17 pm

    I found this really interesting post [“Markup-free icon fonts with unicode range”](http://nimbupani.com/markup-free-icon-fonts-with-unicode-range.html) by Divya Manian… but it is only supported by webkit browsers so far =(

    # June 12, 2013 at 12:30 pm

    Hi.. you should re-drawn the icon, and make sure the grid are in the even count

    that’s it

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".