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
Next is the icon I'm developing with the correct lines
How I can make the lines so they are not blurred?
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It only takes a minute to sign up.Sign up to join this community
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:
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.