Skip to content
Jooosi
Account
JI Jooosi Icon

Etch

Insert a Jooosi Icon in Etch, use the toolbar starter markup, and customize size and color.

Browse documentation
Overview
Contents
On this page
  1. Before you start
  2. Insert an icon from an HTML block
  3. Copy an icon element from the toolbar
  4. Choose an icon on an existing element
  5. Change size and color
  6. Save and verify
  7. Troubleshooting
  8. Related guides

Use the Jooosi Icon picker in Etch to insert an icon directly into HTML, or copy a starter element from the toolbar and paste it where you need it. This guide covers both workflows and how to customize the resulting markup.

Before you start#

  • Activate Jooosi Icon and Etch, then open a page in the Etch builder.
  • Choose and enable an icon source. See Icon Sources for collection and local SVG setup.

Insert an icon from an HTML block#

  1. Add or select an HTML block at the spot where the icon should appear.
  2. In the block properties, click 🎨 Select Icon.
  3. Search or browse the picker and choose an icon. Etch inserts its Jooosi Icon markup at the current cursor position, using a default size of 24px.
  4. Preview the HTML block to confirm the icon appears in the right place.

Copy an icon element from the toolbar#

  1. In the Etch toolbar, choose Jooosi Icon.
  2. The action copies starter markup to your clipboard. Its default dimensions are 32px.
  3. Paste the markup into an HTML block or another supported code field, then replace the example icon name with the identifier you want, using the format prefix:name.
<jooosi-icon name="lucide:arrow-right" width="32" height="32"></jooosi-icon>

Choose an icon on an existing element#

If your layout already contains a <jooosi-icon> element, select it in Etch. Use the name field’s picker action to browse collections and select a different icon, or enter a known identifier such as lucide:search.

For example, an icon can appear inline with its label: Search.

Change size and color#

  • Edit the element’s width and height attributes to set its dimensions, for example width="20" height="20".
  • Set the color attribute when you need a specific color. If it is omitted, the icon can inherit its text color.
  • Keep dimensions consistent with the surrounding line height when placing the icon inside a sentence or button.

Save and verify#

  1. Save or publish the Etch page.
  2. Preview the front end, then check that the selected icon, size, and color match the design.
  3. Uncached Iconify icons require outbound access to the Iconify API. Local SVG sources are served from your site.

Troubleshooting#

  • Select Icon is unavailable: make sure the selected block is an HTML block and both Etch and Jooosi Icon are active.
  • The toolbar action did not paste anything: click the destination HTML or code field before pasting. The toolbar action copies markup; it does not insert it into the current block.
  • The icon name is not found: check the prefix and spelling, and make sure its source is enabled.
  • The icon is invisible on the front end: verify the saved markup and inspect inherited color or layout styles. For Iconify, confirm API access.

See Icon Sources, your first icon, or all integrations.