Insert an icon or pictogram on your hotel website

Add an SVG or PNG file in a few steps

Key points • Adding icons in SVG or PNG format • Simple method using the Designer • Visual optimization for your hotel website • Tips for best graphic design practices

Adding an icon is a great way to improve the readability of your pages, make your information clearer, and provide a smoother user experience. Whether you want to add a pictogram to illustrate your services, equipment, or benefits, the process is quick and easy.

Add an icon in SVG or PNG format

In the Designer, start by choosing where you want to display the icon. Add an Image block from the Elements panel, then import your file in SVG or PNG format. SVG is highly recommended because it is lightweight, vector-based, and ensures perfect quality on all screens, even high-resolution ones.

Once the icon is imported, adjust its size directly from the style panel so that it fits seamlessly into your layout. If you are using a PNG, remember to check the transparency and quality of the file to avoid a pixelated appearance.

Use the icons directly integrated into the design

If your hotel website already has an internal icon library (hosted in the Asset Manager or integrated as symbols), you can replicate or duplicate an existing icon to maintain visual consistency. Simply select the element and duplicate it to speed up your workflow.

💡 Tip: SVG icons are particularly useful for hotel services (Wi-Fi, parking, spa, restaurant, pool) because they can be styled via the site's CSS without loss of quality.

Optimize your pictograms for a perfect experience

Make sure to use clear and descriptive filenames, such as wifi-hotel.svg or spa-icon.png, to keep your library clean and structured. Maintain a consistent style (thickness, shape, angles) to reinforce your establishment's visual identity. Ensure sufficient contrast and add relevant alt text, which is especially important for accessibility and SEO.

Before publishing, preview your page to check that the icon displays correctly on desktop, mobile, and tablet.

Conclusion

Adding an icon to your hotel website is a simple process that significantly improves the user experience. With careful integration and optimized files, your pages gain clarity, impact, and visual consistency.