How do I make icons not blurry?

[Baarden]

Hi, I want to add/use icons on my pages but whenever i load them it appears blurry? What format and size should I save it as? Should I save it size as and use 'original size'? What are some suggestions? I included an image of what my ideal is!

Thank you so much in advance!

[KarlOffenberger · Accepted solution]

Hi Baarden,

You'd need to make sure the <img /> element you're using for the icons is styled with the exact same size of the icon. So if the icon is 32x32 pixels, make sure the image has styles width: 32px and height: 32px as well.

Best wishes!

[Mircea_Piturca]

Hey Baarden,

If you have the SVG version I recommend to use that format.

SVG will have no render issues at any given size as it is a vector format.

[Jason]

The advice here is sound, but for anything needing design advice a link showing this in action is always useful. It can help determine if the issue is related to the image itself, the format, or something else. Without a link we are just guessing as to what the issue may be.

[Baarden]

Hi! This worked! Thank you so much!!!

---

@KarlOffenberger wrote:

Hi Baarden,

You'd need to make sure the <img /> element you're using for the icons is styled with the exact same size of the icon. So if the icon is 32x32 pixels, make sure the image has styles width: 32px and height: 32px as well.

Best wishes!

---

[Baarden]

Hi! For some reason it kept on coming up as 'invalid format' when I do try to load a SVG. It's okay though, I figured it out! Thank you so much!

---

@Mircea_Piturca wrote:

Hey Baarden,

If you have the SVG version I recommend to use that format.

SVG will have no render issues at any given size as it is a vector format.

---

[Baarden]

HI Jason, appreciate your response. I'll be sure the next time if I come across a similar issue and reaching out for help I'll include more documentation to give better context. Thankfully i got it fixed!

---

@Jason wrote:

The advice here is sound, but for anything needing design advice a link showing this in action is always useful. It can help determine if the issue is related to the image itself, the format, or something else. Without a link we are just guessing as to what the issue may be.

---

[Arez]

Hi, may i know how you solve the problem? Im not very familiar with the <img/> thing