Skip to content

Bubble plugin · Icons

The Bubble Heroicons plugin in Next.js

Icons from @heroicons/react.

Partly converts · 8 of 19 parts

By The deBub teamUpdated

On this page

01What it becomes

Icons from @heroicons/react. Heroicons’ icon elements import exactly the icons you used from the official React package; dynamic icon names look the icon up at runtime.

npm packages added to your app: @heroicons/react.

02What converts

  • Solid, outline, mini and hero icon elements, with color, stroke and dynamic icon names
  • “Clicked” events

03Not converted yet

  • The plugin’s PDF tools (PDF generator, headers, footers, page breaks)
  • The spinner icon element

Where your app uses one of these, the generated code keeps a marked placeholder in the right place and your report lists it, so it can be finished with the assistant or by any developer. The rest of the plugin works as described above.

04About this plugin

Heroicons is made by Minimum Code (visual elements (+ PDF tools)). Bubble’s plugin marketplace counts 77,501 installs (a cumulative counter). See its page on the Bubble marketplace.

Questions

Does the Heroicons plugin work outside Bubble?
Not as it is: Bubble plugins only run inside Bubble. In a Next.js app it is replaced by generated code — Icons from @heroicons/react (@heroicons/react).
Will my Heroicons settings carry over?
Mostly. deBub converts 8 of the plugin’s 19 parts from your .bubble export; anything else is marked in the code and listed in your report. Secret keys are added as environment variables.

The deBub team

We build the Bubble → Next.js compiler behind deBub. Spotted something out of date? Write to hello@debub.io.

All 45 plugins

An icon component using the Material Icons font

Converts

An icon component using the feather-icons package

Converts

Typed server-side functions in src/server/api-connector.ts

Converts

Leave Bubble.
Keep building.

The scan is free and shows your exact price. No card needed until you choose to generate.

Start with a free scan