Icon Library Best Practices

An SVG file is structured with an <svg> tag that might contain elements like <path>, <circle>, or <rect>. These elements can define the shapes and components of your SVG.

Ensure that the SVG’s height and width are defined within the <svg> tag to ensure the elements inside the SVG scale accordingly. This maintains the overall size of the icon while keeping its internal components in proportion to the specified dimensions.  

Your title goes here

To check the SVG structure, right click the SVG and click Inspect to view the structure.

• Some SVGs might come with fixed colors (for example, fill="blue"), which cannot be changed within Whatfix. In this case, if you try to change the SVG color, it will not override the hardcoded colors in the SVG. For more information, see How to work with Fill Color and Stroke Color?

• As a best practice, avoid uploading SVGs with fixed colors if you expect them to adapt to Whatfix's theme. Instead, select or create SVGs with dynamic color properties, that is, fill="currentColor", for flexibility.

  Your title goes here

  • To check if an SVG has a fixed color, right click the SVG and click Inspect to view the structure, or open the SVG in a code editor such as VS Code.

  • If the color is fixed, it can be changed directly in the code editor.

• The maximum supported dimensions for icons in the Whatfix Icon Library is 48x48 pixels, and the file size should not exceed 25KB.

• If your SVG exceeds the size limit, consider compressing using any SVG compressor tool.

• For security reasons, SVGs that contain certain HTML tags and attributes are blocked when uploading icons to the Icon Library to prevent malicious code execution.

  Blocked HTML Tags:

  "a", "script", "foreignObject", "image", "video", "feimage", "div", "use", "set"

  Blocked HTML Attributes:

  Any attribute starting with "on" (for example, "onmouseover", "onload"), "href", "xlink:href"

• If your SVG contains any of these tags or attributes, you must remove them and upload the SVG again.

Note

To check if an SVG has any of the following tags or attributes, right click the SVG and click Inspect to view the structure, or open the SVG in a code editor such as VS Code.

• As a best practice, always test your SVG icons in a development environment before using them in production to ensure they behave as expected.