The Icon Block: On-Brand Glyphs Without Hunting For Images

A single SVG glyph you pick from the library or upload yourself — then size, shape, colour and link it right in the editor.

Every icon from one place — the Icon block

You’re building a page and you need a few small icons — a phone by the number, a checkmark next to each feature, a star on the review. So you grab one from a free pack, screenshot another, and recolour a third by hand in an image editor. Three sources, three sizes, three slightly different greens. On screen it reads as a little off, and you can’t quite say why.

The Icon block puts every one of those glyphs in one place. You pick from a built-in library or upload your own SVG, then size, shape, colour and link it right where it sits on the page — so the whole site draws from a single, consistent set.

Pick from the built-in glyph library, or upload your own SVG — one icon set for the whole site.
Square, rounded or circle frame with its own background and padding — a flat glyph becomes a coloured badge.
Border and hover colours — the icon can outline itself and react the moment a visitor points at it.
An optional link with new-tab and nofollow control — any icon becomes clickable.

And the usual size, alignment, spacing and colour controls sit alongside them, per device — so the icon fits your design instead of fighting it.

Four icons, four looks — the same block

Every tile below is the same Icon block — only the settings change. Each one is centred, so it holds its own on the page instead of drifting to one side.

Plain glyph, no frame. The bare icon inherits your theme colour — the simplest look.

Circle badge, filled background. A soft-green disc with padding turns the glyph into a chip.

Rounded frame, outlined. A two-pixel border and rounded corners give a light, hollow badge.

Linked, colour-shift on hover. Point at this one — the disc darkens because it carries a hover colour and a link.

Ready to drop in your first icon?

The Icon block ships inside Flexa Block. Install the plugin and it’s waiting in the editor the next time you open a page — along with the live ones you just scrolled past.

More articles

Keep reading

Other guides from the Flexa Blocks library.

48 posts found