SVG icons appear cropped

Issue

When you try to upload an SVG (Scalable Vector Graphics) icon to the icon library, the icon gets cropped around the corners.

Suggested Solutions

Make the following edits to an icon in a basic code editor and then proceed with saving and uploading it to the library:

• Ensure that the SVG’s height and width are defined within the inline <svg> tag to ensure the elements inside the SVG scale accordingly. This retains the overall size of the icon by maintaining the internal components in proportion.  

• The maximum supported dimensions for icons in the Whatfix Icon Library are 48x48 pixels (px), and the file size should not exceed 25KB.  However, instead of using px, set the icon width and height to unitless values (or 100%). Doing so enables the icon to scale flexibly within its space, preventing cropping of the icon. For instance, use <svg width="100%" height="100%" viewBox="0 0 48 48">.

• As a best practice, avoid uploading SVGs with fixed colors if you want them to adapt to Whatfix's theme. Instead, use dynamic color properties, such as fill="currentColor", for flexibility.

Note:

If the issue persists, contact support@whatfix.com.

For more information on the best practices followed for icon usage and upload to the icon library, see Icon Library Best Practices.