Skip to content
Jooosi
Account
JI Jooosi Icon

Integrations

Step-by-step Jooosi Icon tutorials for Gutenberg, Elementor, Bricks, Breakdance, ACF, LiveCanvas, Etch, and Divi 5.

Browse documentation
Overview
Contents
On this page
  1. Get set up
  2. Choose your editor
  3. Before choosing a workflow
  4. Icon sources and availability
  5. Custom workflows

Add icons where you build: choose a source, select an icon, and fine-tune its appearance in your editor. Jooosi Icon integrates with blocks, widgets, builder elements, and custom fields.

Get set up#

Start with Installation and your first icon. Choose an icon collection or upload SVGs in Icon Sources before opening your editor.

Choose your editor#

Advanced Custom Fields (ACF)Build an icon field, choose a return format, and render it in PHP or Bricks. Block Editor (Gutenberg)Add the block, choose an icon, and set its size and color. BreakdanceAdd the element from Basic, browse icons, and style its dimensions. BricksAdd the element, set its appearance, and connect dynamic data. Divi 5Use the Divi 5 module to choose and style an icon in your layout. ElementorAdd the widget, search the library, and configure responsive styling. EtchInsert icons into HTML or copy starter markup from the toolbar. LiveCanvasAdd the block and control its shared size and color.

Before choosing a workflow#

Each integration provides a native way to select and preview an icon. A builder may call it a block, widget, element, field, or module. The tutorials below show where to find that control, how to enter an icon identifier such as lucide:arrow-right, and where to set size or color. Use the tutorial for the editor that owns the page or template you are editing.

Icon sources and availability#

The picker works with the sources enabled on your site. Uncached Iconify icons need outbound access from your server to the Iconify API; local SVG icons are served from your own site. If a picker result is missing, confirm that its source is enabled and that the icon identifier uses the correct prefix.

Custom workflows#

For code examples that work beyond these editor integrations, see Developer Reference. If you maintain an icon catalog of your own, follow Register a Custom Source under Icon Sources.