Icon — Documentation

Icon places a single icon on the page — chosen from the built-in library or pasted as your own SVG — and lets you style its size, color, rotation, shape background, border, and link. Use it for feature bullets, social links, or decorative accents.

How to add

Open the block inserter, switch to the Axiom Blocks category, and click Icon. It drops in with a star — click Replace to open the icon picker.

Icon source

Type — Library or Custom SVG.

Library — search the icon picker and click to select. The chosen icon is stored by slug, so it stays crisp at any size.
Custom SVG — paste raw <svg> markup. It's sanitized through the same allow-list used everywhere in the plugin, so only safe SVG elements and attributes survive.

Accessibility label — optional. When set, the icon is exposed to screen readers (via role="img" and aria-label, or as the link's label); when empty, the icon is treated as decorative and hidden with aria-hidden.

The block sidebar is split into two tabs. Settings is what the icon does; Styles is how it looks.

Tab	Section	Covers
Settings	Icon	Icon picker, accessible label, shape, rotation
Settings	Link	URL, open in new tab, rel
Settings	Advanced	Visibility, Position, anchor, CSS class
Styles	Icon	The glyph itself
Styles	Shape	The background shape behind it
Styles	Spacing	Padding and margin on the wrapper

Shape

Shape in Settings wraps the icon in a background shape: None, Circle, Square, or Rounded. Rotation (in degrees) sits alongside it.

Styling

Part	Rows
Icon	Color, Size (per device)
Shape	Background (solid or gradient), Border, Radius, Shadow
Spacing	Padding and margin on the wrapper

The Shape rows only have a visible effect once a shape other than None is selected.

Link

URL — turns the icon into a link.
Open in new tab — adds target="_blank" with rel="noopener noreferrer".
Nofollow / Sponsored — append the matching rel tokens.

The block supports Wide and Full alignment and an HTML anchor.

HTML output

// terminalhtml

<div class="wp-block-axiom-blocks-icon ab-icon ab-icon--align-center">
  <a href="https://example.com" class="ab-icon__box ab-icon--circle">
    <span class="ab-icon__glyph" aria-hidden="true"><svg>…</svg></span>
  </a>
</div>

When there's no link, the box is a <span> instead of an <a>. Size, colors, rotation, and the shape background are all driven by --ab-icon-* custom properties on the wrapper, so the hover color is handled in pure CSS.