Cookie Settings Icon Button

When the Super cookie consent banner is enabled, visitors who already made a choice see a small Cookie settings button in the bottom-left corner, so they can change their consent at any time. If you prefer a cleaner look, the snippet below turns that text button into a round button with a cookie icon. The button still opens the same cookie preferences, and screen readers still announce it as "Cookie settings".

Cookie settings as an icon

The icon is the Lucide Cookie icon. It takes the text color of the button, so it works in light and dark mode and keeps the hover effect.

Requirements

• Cookie consent is enabled for your site in the Super Dashboard (Cookies section).
• Your plan includes custom code.

Installation instructions

1. Open your site in the Super Dashboard.
2. Open the Code section.
3. In the CSS tab, paste the code below.
Copy
4. Save your changes.
5. Open your live site, accept or reject cookies in the banner, and check the bottom-left corner.

Customization

• Change width and height of .super-cookie-settings to resize the round button.
• Change width and height in ::before to resize the icon itself.
• Change stroke-width='1.5' (in both mask lines) to make the icon lines thinner or thicker.

Notes and limitations

• The button appears only after a visitor has accepted or rejected cookies. Before that, the banner itself is shown.
• The text "Cookie settings" stays in the page, only visually hidden, so the button remains accessible.
• The code depends on the super-cookie-settings class name. If it changes, the code may need an update.

Troubleshooting

• If you still see the text button, check that the code is in the CSS tab (not Head or Body) and refresh the page.
• If you see no button at all, make sure cookie consent is enabled and that you have already made a choice in the banner.