Troubleshooting
Most of the time when you run into this issue using icons online, it’ll be when using a PNG. They work pretty well when you scale them down, but if you go too small the icon will become hard to recognize. PNGs can quickly become quite blurry if they are scaled up. It’s rare for a SVG to have this issue.
Here are some possible causes and solutions:
The code (CSS) that controls the look and layout of the website or email is affecting the icon and making it show up as either too large or too small. Using SVGs will help avoid this issue, but even a SVG can become hard to recognize if its scaled down too small.
Viewing PNGs on a high resolution screen, like a 4K desktop monitor or an iPhone. The PNG doesn’t have enough resolution so when viewed on a high resolution screen it appears blurry. Switching to using SVG icons instead to fix. If that’s not an option, upload a PNG size that’s roughly double the size of what’s needed and then scale it down by half.
The icons are all perfectly square and something is making the icons just a bit taller or wider in one direction than the other. This technically means the icon is distorted enough to make it blurry but not so much that it looks stretched. This issue is more difficult to confirm than others. If you think this is the issue, see the next section about troubleshooting distorted icons.
If you’re using an office printer, the issue is likely that the icon resolution isn’t high enough so it appears fuzzy when printed out. Try using a SVG or PDF in the document if you can. If that’s not an option, use the 256px or 512px PNG sizes instead. Those sizes have higher resolution than the smaller PNG sizes and will help.
If you’re working with a vendor or designer, it’s an issue that they should be able to sort out and fix for you. They should tell you if you need to give them a different file type to work with when they are creating the printed piece.
Both SVGs and PNGs can look distorted. SVGs are more forgiving though. This is more likely to happen when using a website builder like WiX or SquareSpace to place and size the icons. Switching to a different file type normally won’t help address this type of issue.
Here are some possible causes and solutions:
The width/height wasn't scaled the same amount when resizing the icon. Usually this would happen when using a website builder like WiX or Squarespace to position and size the icon. Try selecting the icon and then look in the interface for an area that displays information about the icon’s dimensions. This may be shown in percentages or pixels. Check that the width and height match. If they don’t, change them. You can also remove the icon from the layout and then place the icon in again to reset it.
The code (CSS) that controls the look and layout of the website or email is forcing the icon to stretch. To fix, the code would need to be changed. You could either do it yourself if you’re familiar and comfortable with CSS. If not, we recommend contacting the webmaster or submit a help ticket with the website service you’re using.
The same causes and solutions that apply to using icons online also apply when using them in printed pieces. If the icons look stretched or distorted, try making sure the dimensions are perfectly square or delete and then place the icon into the layout again.
Some website editors/builders will clean and “sanitize” the SVG file once you upload the file. If they’re too aggressive with cleaning the file, it can break the display of the icon in the browser. First, check that the file path to the image is correct. See the section below for more info. If that’s not the issue, then try uploading the icon again and contact your webmaster or hosting provider if that doesn’t fix the issue.
If the browser can’t find the image, it’ll display a broken image icon in its place. To double check if this is the issue, right click on top of the image in the web browser. Click on “Open in a New Tab” option in the list. In the new tab that opens, look at the path shown in the address bar. You can use that path to start figuring out if the image is pointing to the wrong folder or has been deleted. This is not normally an issue you’ll encounter when you’re first adding the icons. Usually it happens later on when something changes with your hosting and accidentally deleting a file or folder. We recommend working with your webmaster or hosting provider if you’re not able to fix the issue.