MARKETPLACE
PLUGINS
HEROICONS (FORMERLY MAGIC PDF)
Heroicons (formerly Magic PDF) logo

Heroicons (formerly Magic PDF)

Published May 2021
   •    Updated today

Plugin details

⚠️ IMPORTANT NOTICE: If you installed this plugin for its PDF functionality, please note that PDF features have been moved to a separate, dedicated plugin as per Bubble Marketplace guidelines. To access future PDF updates, please install the new standalone plugin here: https://bubble.io/plugin/1783583675718x611497686350430200

Feel free to reach out to me directly for detailed migration instructions.

-----------

Beautiful hand-crafted SVG icons by the makers of Tailwind CSS.

This plugin is a small wrapper that makes it easy & straightforward to use these fantastic icons in your bubble app!

❗Demo available here 👉🏽 https://heroicons.bubbleapps.io/version-test

View the editor 👉🏽 https://bubble.io/page?name=index&id=heroicons

Adjust size and colors ✅
Solid, Outline and Mini icon styles ✅
Change background, borders and shadows ✅
Respond to click events ✅
Works in bubble buttons ✅
Supports color transitions ✅
Tooltips on hover ✅

Check out the heroicons website to find the full set of supported icons & what they looks like!

💡 Learn to build plugins from a team that's built 100+ since 2018. No filler content. Real examples.

👉 https://minimum.studio/plugin-course

Free

For everyone

4.1 stars   •   33 ratings
77.0K installs
This plugin does not collect or track your personal data.

Other actions

Platform

Web

Contributor details

Cosmic Steve logo
Cosmic Steve
Joined 2020   •   33 Plugins
View contributor profile

Instructions

This plugin allows you to render beautiful heroicons separately, or in buttons.
⚠️ If you're using icons in buttons and Heroicons 4+ check our migration guide -> https://heroicons.bubbleapps.io/version-test/migration_guide_v4

📢 How to use standalone icons

1️⃣ Add the icon element to your page. There are three styles to choose from. Mini, Solid and Outline. Each style has its own element. Search for Mini, Solid or Outline in the elements tree to find the one you want to use.

2️⃣ Customize the icon to your liking. You can change the size, color, hover state, background, borders and more.

3️⃣ Optionally, add a click listener or tooltip if you need to respond to clicks on the icon.

Check the demo & editor for examples (links below).

📢 How to use icons in buttons

1️⃣ First add a native bubble button to your page.

2️⃣ In the button text, add the special heroicon bracket notation to specify which icon you want to show inside of the button.

[hil]chat-bubble-left[/hil] Chat
[his-b-18]calendar-days[/his-b-18]
[hir]cog-6-tooth[/hir] Settings

Check the demo & editor for examples and a visual explanation of this notation (links below).

⚠️ Warning: Heroicons 1.6 are no longer supported. You must use Heroicons 2.0 names only. Check available icons here -> https://heroicons.com/

⚠️ The native bubble 'is pressed' and 'isn't pressed' states will be ignored on the icons elements.

Demo available here 👉🏽 https://heroicons.bubbleapps.io/version-test

View the editor 👉🏽 https://bubble.io/page?name=index&id=heroicons

Types

This plugin can be found under the following types:
Background Services   •   Element   •   Event

Categories

This plugin can be found under the following categories:
Productivity   •   Ecommerce   •   Blog   •   Internationalization   •   PDF   •   Visual Elements

Resources

Support contact
Tutorial

Rating and reviews

Average rating (4.1)

Good plugin
July 9th, 2026
Easy to use with YT video tuto and quick support
not so good
July 7th, 2026
It works perfectly on the frontend. However, since PDFs are generally generated for private data, you have to go through the backend—which takes too long and fails one out of four times on average. It's a shame, because setting it up was easy.
Hi there, thank you for your honest feedback! You are absolutely right, backend PDF generation needs to be fast and very stable, because that is the only way to deal with private data. The great news is: I just released a big backend update! 💪 I completely changed how the engine handles authentication. This greatly reduced the processing time and fixed those random failures. I would really appreciate it if you could try the backend generation again. 🙏 If you still have any problems, please contact me directly at info@thecosmicpie.com. I want to make sure the backend experience is as smooth as your frontend setup. Best regards, Steve
June 28th, 2026
  •  
Cosmic Steve
i like it, but could you do it for me ?
October 15th, 2025
We have a transition applied to color, but for the trash icon (for example), I use an outline style by default and a solid style on hover. The transition doesn’t affect this state change. It doesn’t matter if I also change the color. when I change the state, the transition has no effect.
only missing one thing...
September 23rd, 2025
would be great to have a list of supported hero icons. If you go to the hero icon site and try some, not all work with this plugin...or maybe it's user error?
Limited
January 3rd, 2025
The conditional spinner in buttons works with custom states only, not with 'do a search'. It Should be mentioned. Hope some people will save time knowing that.
Bubble logo
Product
AI
Mobile
Design
Data
Logic
Collaboration
Security
Status
Release notes
Bubble for
Founders
Developers
Agencies
Enterprise
Discover
How Bubble works
Examples
Bubble is Global
Pricing
Learn
Academy
Technical guides
Blog
How to build
Coaching
Resources
Connect to AI
Marketplace
Templates
Plugins
Experts
Bootcamps
Certification
Partnerships
Affiliates
Figma to Bubble
Community
Bubble community
Forum
Newsletter
Podcast
Ideaboard
Early access
Store
Company
About
Careers
Brand guidelines
Support
Contact us
Legal
Terms
Privacy
©  2026, Bubble Group, Inc. All rights reserved.
Bubble
Pricing
Enterprise
Contact sales