Compatibility:

WebSite X5 Evo and Pro

When you design a web page, details often make the difference. An icon next to a title or inside a button can make the layout clearer and more professional.


The problem is that traditional images, such as PNG or JPG files, can lose quality when resized or make the page heavier, especially on a responsive website.


SVG icons solve this limitation: they are lightweight, scalable, and always sharp. With the SVG Icon Optional Object, you can easily insert them into your website pages and adapt them to your design, without technical complications. 


What are SVG icons and why use them

SVG icons (Scalable Vector Graphics) are vector images: this means they are not made up of pixels like traditional JPG or PNG images, but of mathematical shapes.


The result? They can be enlarged or resized without losing quality and without becoming blurry.


Using SVG icons on your website offers several advantages:

  • Always perfect quality, on any screen and at any size;
  • Reduced file size, for lighter and faster-loading pages;
  • Greater flexibility, because you can easily change color and size;
  • Perfect integration with responsive design.


SVG icons are ideal, for example, to:

  • accompany titles and descriptive texts;
  • enhance buttons and call-to-action elements;
  • create “Services” sections with clear and consistent graphic elements;
  • improve the appearance of menus, footers, and informational boxes.


Thanks to the SVG Icon Object, you can take advantage of all these benefits directly within your project pages.


How to use the SVG Icon Object

To insert an SVG icon into your website pages, follow these steps:

  • Insert the SVG Icon Object into the page and double-click it to access the window with all available options.
  • Use the Icon File field to import the icon you want to use: you can choose whether to search for a Local File or use the Online Library (for more information, see How do you import a file?). By clicking the button you can add a title and alternative text useful for accessibility as well as for the page’s SEO optimization (see Image accessibility: the importance of alternative text).
  • At this point, you can work on the icon’s Style. Through the Format option, you can decide whether to keep it as it is originally or recolor it with your preferred color.
  • To further customize the icon’s appearance, you can adjust Size, Margins, Background Color, and corner Rounding.
  • If you wish, you can associate an Effect with the icon, meaning an animation that will play on mouse hover. 
  • Finally, you can turn the icon into a button by adding a link: click the button  and, in the window that opens, choose the action to associate with the link.
  • When you are satisfied, click the Ok button to confirm. 


Can’t wait to use it in your website pages? Install the SVG Icon Object now


Don’t have enough Credits to purchase this Object? View all Credit packages