icon element

A built-in line icon by name, or your own icon file.

Syntax

{ "type": "icon" }

An element lives in a screen's sections, another element's elements, a layout slot or a component root.

Properties

Plus the properties every element accepts: id, className, style, responsive, states, animation, visible, ariaLabel, attributes and more.

Example

{
  "type": "row",
  "layout": { "gap": "12px" },
  "elements": [
    { "type": "icon", "name": "cart" },
    { "type": "icon", "name": "heart" },
    { "type": "icon", "name": "truck", "ariaLabel": "Free delivery" }
  ]
}

Icons are decorative (aria-hidden) unless you give them an ariaLabel. Size and colour them with CSS: .iwc-icon { width: 20px; height: 20px; } and color. The full set is below.

Expected output

The HTML IWC rendered for the example above (inside the page's content wrapper). Class names such as i807b63fc are generated per element for its scoped CSS.

<div class="iwc-page ipage" id="iwc-content">
  <div class="iwc-row i6cd6521f">
    <span class="iwc-icon i51820b4b" data-icon="cart" aria-hidden="true"><svg class="iwc-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="9" cy="20" r="1.5"/><circle cx="18" cy="20" r="1.5"/><path d="M3 4h2l2.4 11.2a2 2 0 0 0 2 1.6h7.7a2 2 0 0 0 2-1.5L21 8H6"/></svg></span><span class="iwc-icon if3dd58d1" data-icon="heart" aria-hidden="true"><svg class="iwc-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 20s-7-4.4-9-9a5 5 0 0 1 9-3 5 5 0 0 1 9 3c-2 4.6-9 9-9 9z"/></svg></span><span class="iwc-icon id5927393" aria-label="Free delivery" data-icon="truck" role="img"><svg class="iwc-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 6h11v10H3zM14 9h4l3 3v4h-7"/><circle cx="7" cy="18" r="2"/><circle cx="17" cy="18" r="2"/></svg></span>
  </div>
</div>

Data, conditions & styling

• Conditional rendering: "visible": {"auth": "signed-in"}, {"roles": ["admin"]} or an expression such as "=product.stock > 0". Decided on the server: hidden elements are never sent.
• Data binding: bind takes text from data (name, user.name, props.title, params.slug, state.cart.count); binds binds attributes. Containers become data-driven with data + item. See data binding.
• Styling: className for your stylesheets, style for CSS in JSON, states for hover/focus/active, animation for entrance motion. See the style property reference.
• Responsive behaviour: responsive applies CSS at or below a breakpoint ({"mobile": {"padding": "12px"}}); grids also take responsiveColumns.

Icon set

The 79 built-in icons, drawn from iwc/internal/render/icons.go. Use the name in "name".

• alert
• arrow-left
• arrow-right
• award
• basket
• bell
• book
• briefcase
• calendar
• camera
• cart
• chart
• check
• check-circle
• chevron-down
• chevron-left
• chevron-right
• chevron-up
• clock
• close
• compare
• copy
• cpu
• credit-card
• download
• dumbbell
• edit
• external
• eye
• file
• filter
• footprints
• gem
• gift
• globe
• grid
• headset
• heart
• heart-outline
• help
• home
• image
• info
• list
• lock
• log-out
• mail
• map-pin
• menu
• minus
• more
• package
• percent
• phone
• plus
• printer
• refresh
• search
• settings
• share
• shield
• shirt
• sliders
• sofa
• sort
• sparkles
• star
• store
• tag
• thumbs-up
• trash
• trending
• truck
• upload
• user
• users
• wallet
• x-circle
• zap