I created an icon for a web page with lines of 2px and dimensions 42x42(px) but when I put it in webpage the lines are blurred, see the image enter image description here

Next is the icon I'm developing with the correct lines enter image description here

How I can make the lines so they are not blurred?

  • 1
    Take a look at these two answers. They might help: graphicdesign.stackexchange.com/questions/48949/… graphicdesign.stackexchange.com/questions/29719/…
    – cockypup
    Mar 7 '15 at 19:39
  • As @Naty referenced, in your above example, the red sample is 42x42, and has crisp lines. The sample white-on-black image though is only 35x35. If your image is not being presented in its native size in the browser, then you are very likely going to have some blurring as a result. You need to design your icon to be pixel perfect at the size you intend it to be displayed.
    – apex
    Mar 9 '15 at 17:14

Your problem is that you are not designing a pixe perfect icon and your are not uploading it in the exact size.
The easy solution is just to upload an svg, and there are 2 options for that:

  1. Upload and .svg icon
  2. Converting the icon into a font, which is basically the same as uploading an svg to the website. (You actually upload an svg to the icons fonts)

The only real reason to turn from uploading an svg to icon fonts is if you have a set of icons that are uploaded again and again in various parts of the website


Try converting your icon into a font that should fix the blurry problem.

Check this link:


Then you can modify the size with CSS.

Hope it works.

  • Thanks for your answer, I will do that too, but the issue is that I'm embedding the image in an already built theme, so sadly it is a png what I need to use :( Maybe you can apport a solution to the blurred lines on the png? Thanks for your time. Mar 7 '15 at 18:39
  • Fonts have smoothing as well, so this won't necessarily fix the issue.
    – DA01
    Mar 7 '15 at 19:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.