How do I make icons not blurry?

Solved
Baarden
Tourist
4 0 0

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!

 

 

0 Likes
KarlOffenberger
Shopify Partner
1867 182 776

This is an 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!

Liked this post? You might also like our fantastic upsell apps Candy Rack and Candy Cart or offer free gifts with Gift Box. All made with ❤️  and care by Digismoothie
Mircea_Piturca
Shopify Partner
1459 39 284

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.

Finally—Add variant descriptions to your products
Jason
Shopify Expert
10037 119 1872

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.

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
Baarden
Tourist
4 0 0

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!


 

0 Likes
Baarden
Tourist
4 0 0

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.


 

0 Likes
Baarden
Tourist
4 0 0

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.


 

0 Likes
Arez
New Member
1 0 0

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

0 Likes