--- title: Applying and positioning hotspot icons optimally description: When it comes to positioning icons, we believe there are three simple rules to make sure your icons are always positioned in a logical way that enhances the user experience. It's important to make sur --- [Skip to content](https://support.publitas.com/applying-and-positioning-hotspot-icons-optimally#main-content) - [English](https://support.publitas.com/applying-and-positioning-hotspot-icons-optimally) - [Deutsch (German)](https://support.publitas.com/de/applying-and-positioning-hotspot-icons-optimally) - [Español (Spanish)](https://support.publitas.com/es/aplicando-y-colocando-los-iconos-de-zonas-activas-de-forma-óptima) - [Nederlands (Dutch)](https://support.publitas.com/nl/applying-and-positioning-hotspot-icons-optimally) English Show submenu for translations [Contact Support](https://support.publitas.com/kb-tickets/new?hsLang=en) ![Publitas blue-270](https://support.publitas.com/hs-fs/hubfs/Publitas%20blue-270.png?width=175&height=57&name=Publitas%20blue-270.png) Open main navigation Close main navigation - - [English](https://support.publitas.com/applying-and-positioning-hotspot-icons-optimally) - [Deutsch (German)](https://support.publitas.com/de/applying-and-positioning-hotspot-icons-optimally) - [Español (Spanish)](https://support.publitas.com/es/aplicando-y-colocando-los-iconos-de-zonas-activas-de-forma-óptima) - [Nederlands (Dutch)](https://support.publitas.com/nl/applying-and-positioning-hotspot-icons-optimally) English Show submenu for translations - [Contact Support](https://support.publitas.com/kb-tickets/new) - [Back to Publitas](https://www.publitas.com/) [Back to Publitas](https://www.publitas.com/) How can we help you? - There are no suggestions because the search field is empty. 1. [Knowledge Base](https://support.publitas.com/?hsLang=en) 2. [Adding Hotspots](https://support.publitas.com/adding-hotspots?hsLang=en) 3. [Using the hotspot editor](https://support.publitas.com/adding-hotspots?hsLang=en#using-the-hotspot-editor) # Applying and positioning hotspot icons optimally When it comes to positioning icons, we believe there are three simple rules to make sure your icons are always positioned in a logical way that enhances the user experience. ### 1. Touch the edge of a product, but don't cover it up It's important to make sure the hotspot icon and its mouse-over text are placed in a logical position without obstructing or covering important details of the product. Placing the icon in the center of the product will draw attention away from the image, so try and position the icon on the edge of the product whenever possible. *Example of correct and incorrect icon placement, respectively: ![42](https://support.publitas.com/hs-fs/hubfs/42.png?width=573&height=165&name=42.png)* Another mistake that often confuses users is floating icons. These icons are disconnected from the product they belong to, making it look like they're just floating on the page. *Example of a floating icon. Can you guess which product this icon belongs to? ![43](https://support.publitas.com/hs-fs/hubfs/43.jpeg?width=580&height=316&name=43.jpeg)* ### 2. Create sufficient space It's also important to ensure that icons aren't touching or stacked on each other. You can do this by creating space between icons to avoid confusion and clarify which icon belongs to which product. *Example of icons that don't have enough space between them: ![44](https://support.publitas.com/hs-fs/hubfs/44.jpeg?width=552&height=487&name=44.jpeg)* As you can see in the example above, it's not instantly clear which icon belongs to which product. This is much clearer: *Example of icons with enough space between them: ![45](https://support.publitas.com/hs-fs/hubfs/45.jpeg?width=548&height=499&name=45.jpeg)* ### 3. Be consistent Perhaps the most important rule for positioning your icons is consistency. It's foundational to a good user experience and also helps shoppers quickly identify which product belongs to the icon. *Consistent icon placement: ![46](https://support.publitas.com/hs-fs/hubfs/46.jpeg?width=572&height=406&name=46.jpeg)* Here's how **not** to do it: *Inconsistent icon placement:* ![47](https://support.publitas.com/hs-fs/hubfs/47.jpeg?width=567&height=403&name=47.jpeg) - [Managing Publications](https://support.publitas.com/managing-publications?hsLang=en#main-content) - [Create Content in Publitas](https://support.publitas.com/managing-publications?hsLang=en#create-content-in-publitas) - [Managing your publications](https://support.publitas.com/managing-publications?hsLang=en#managing-your-publications) - [Editing pages](https://support.publitas.com/managing-publications?hsLang=en#editing-pages) - [Updating the Publication URL](https://support.publitas.com/managing-publications?hsLang=en#updating-the-publication-url) - [SEO](https://support.publitas.com/managing-publications?hsLang=en#seo) - [Troubleshooting](https://support.publitas.com/managing-publications?hsLang=en#troubleshooting) - [Create Adaptive content in Publitas](https://support.publitas.com/managing-publications?hsLang=en#create-adaptive-content-in-publitas) - [Adding Hotspots](https://support.publitas.com/adding-hotspots?hsLang=en#main-content) - [Using the hotspot editor](https://support.publitas.com/adding-hotspots?hsLang=en#using-the-hotspot-editor) - [Hotspots explained](https://support.publitas.com/adding-hotspots?hsLang=en#hotspots-explained) - [Hotspot automation](https://support.publitas.com/adding-hotspots?hsLang=en#hotspot-automation) - [Customizing the Reader](https://support.publitas.com/customizing-the-reader?hsLang=en#main-content) - [Reader settings](https://support.publitas.com/customizing-the-reader?hsLang=en#reader-settings) - [Branding](https://support.publitas.com/customizing-the-reader?hsLang=en#branding) - [Banners](https://support.publitas.com/customizing-the-reader?hsLang=en#banners) - [Publishing Publications](https://support.publitas.com/publishing-publications?hsLang=en#main-content) - [Sharing](https://support.publitas.com/publishing-publications?hsLang=en#sharing) - [Embedding](https://support.publitas.com/publishing-publications?hsLang=en#embedding) - [Availability](https://support.publitas.com/publishing-publications?hsLang=en#availability) - [Generating reach](https://support.publitas.com/publishing-publications?hsLang=en#generating-reach) - [E-commerce & Product Feeds](https://support.publitas.com/e-commerce-product-feeds?hsLang=en#main-content) - [Importing Product Feeds](https://support.publitas.com/e-commerce-product-feeds?hsLang=en#importing-product-feeds) - [Managing product details](https://support.publitas.com/e-commerce-product-feeds?hsLang=en#managing-product-details) - [E-commerce Solutions](https://support.publitas.com/e-commerce-product-feeds?hsLang=en#e-commerce-solutions) - [Dynamic Publications](https://support.publitas.com/dynamic-publications?hsLang=en#main-content) - [Creating dynamic content](https://support.publitas.com/dynamic-publications?hsLang=en#creating-dynamic-content) - [Using Publitas Interactive](https://support.publitas.com/using-publitas-interactive?hsLang=en#main-content) - [The basics](https://support.publitas.com/using-publitas-interactive?hsLang=en#the-basics) - [Integrations](https://support.publitas.com/using-publitas-interactive?hsLang=en#integrations) - [Publication Analytics](https://support.publitas.com/publication-analytics?hsLang=en#main-content) - [Publication Dashboard](https://support.publitas.com/publication-analytics?hsLang=en#publication-dashboard) - [Google Analytics](https://support.publitas.com/publication-analytics?hsLang=en#google-analytics) - [Other integrations](https://support.publitas.com/publication-analytics?hsLang=en#other-integrations) - [Insights & Recommendations](https://support.publitas.com/publication-analytics?hsLang=en#insights-recommendations) - [API](https://support.publitas.com/api?hsLang=en#main-content) - [Publitas API](https://support.publitas.com/api?hsLang=en#publitas-api) - [Privacy and Security](https://support.publitas.com/privacy-and-security?hsLang=en#main-content) - [Account security](https://support.publitas.com/privacy-and-security?hsLang=en#account-security) - [Cookies, privacy, and policies](https://support.publitas.com/privacy-and-security?hsLang=en#cookies-privacy-and-policies) - [Account](https://support.publitas.com/account?hsLang=en#main-content) - [Login and password](https://support.publitas.com/account?hsLang=en#login-and-password) - [Managing your account](https://support.publitas.com/account?hsLang=en#managing-your-account) - [Billing](https://support.publitas.com/billing?hsLang=en#main-content) - [Billing Details](https://support.publitas.com/billing?hsLang=en#billing-details) - [Subscription](https://support.publitas.com/billing?hsLang=en#subscription) - [Data Traffic](https://support.publitas.com/billing?hsLang=en#data-traffic) - [Partners and Integrations](https://support.publitas.com/partners-and-integrations?hsLang=en) - [Learning Center](https://support.publitas.com/learning-center?hsLang=en#main-content) - [Tutorials](https://support.publitas.com/learning-center?hsLang=en#tutorials) - [Trust & Safety](https://support.publitas.com/trust-safety?hsLang=en) [![Publitas blue-270](https://support.publitas.com/hs-fs/hubfs/Publitas%20blue-270.png?width=100&height=32&name=Publitas%20blue-270.png "Publitas blue-270")](http://publitas.com) Copyright © 2025, Publitas B.V.