Skip to content
Jooosi
Account
JI Jooosi Icon

LiveCanvas

Add the Jooosi Icon block in LiveCanvas, select an icon, and adjust its size and color.

Browse documentation
Overview
Contents
On this page
  1. Before you start
  2. Add the Jooosi Icon block
  3. Choose an icon
  4. Set size and color
  5. Save and verify
  6. Troubleshooting
  7. Related guides

Add icons to a LiveCanvas layout with the Jooosi Icon block. Choose an icon, adjust its shared size and color, and save it with the rest of your page content.

Before you start#

  • Activate Jooosi Icon and LiveCanvas.
  • Open a page in the LiveCanvas visual builder.
  • Review Icon Sources if you need to enable a collection or understand Iconify API access.

Add the Jooosi Icon block#

  1. In LiveCanvas, open the component or block inserter.
  2. Search for Jooosi Icon. The block is in the Basic category, after the built-in Icon block.
  3. Add the Jooosi Icon block where you want it in the layout.
  4. Select the block to open its side-panel properties.

Choose an icon#

In the side panel, click Browse Icons, search by icon name or collection, and choose a result. You can also enter a known identifier in the icon name control using prefix:name, for example lucide:arrow-right. The selected icon should appear in the builder preview.

For example, a search icon can sit beside a search label: Search.

Set size and color#

  • Move the Size slider to resize the icon. LiveCanvas uses this one control for both width and height, so the icon stays square.
  • Set Color in the side panel. Leave it unset when you want the icon to inherit the surrounding text color.
  • Use the parent row, column, or layout controls to align the icon with nearby content.

Save and verify#

  1. Save or update the page in LiveCanvas.
  2. Preview the page outside the builder and check the icon at the intended screen width.
  3. If you use an Iconify icon that has not been cached yet, make sure the server can reach the Iconify API. Uploaded local SVG icons are served from your site.

Troubleshooting#

  • The block is missing: confirm both plugins are active, then reload the visual builder and search the Basic category again.
  • The picker is empty or the icon does not load: confirm the source is enabled and the icon identifier uses the correct prefix and name. Uncached Iconify icons need outbound API access.
  • The icon looks stretched: use the Size slider, which applies the same value to width and height, and check for theme CSS overriding the element.
  • The color does not change: inspect inherited styles on the parent block and confirm a Color value is set on Jooosi Icon.

Continue with Icon Sources or your first icon, or return to all integrations.