< Back to blocks

Visual & UI Blocks

Enhance your designs with beautiful, functional UI elements. From icons to progress bars, these blocks add visual polish and improve user experience. All blocks maintain accessibility and integrate seamlessly with WordPress’s design system.

Icon | Icon Button | Icon List | Pill | Progress Bar | Divider | Blob

Icon

Inline SVG icons with customizable styling

Display crisp, scalable icons from our extensive icon library. Perfect for feature lists, CTAs, decorative elements, and enhancing visual hierarchy.

Extensive library – Plenty of icons to choose from

Filled or outlined – Two style variants per icon

Scalable sizing – Any size without quality loss

Rotation control – Rotate icons 0-360 degrees

Color customization – Text and background colors

Padding and borders – Create icon boxes or badges

Link support – Make icons clickable

Accessibility – Decorative or semantic with ARIA labels

Demo

Just a few to share of our 155+ icons available.

Icon Button

Clickable button with icon and text

Combine icons with text in a button format for enhanced CTAs and navigation links.

Icon + text – Best of both worlds

Icon positioning – Left, right, top, or bottom

Full button styling – Background, borders, padding

Hover effects – Custom hover states

Link functionality – Internal or external links

Size presets – Small, medium, large

Alignment options – Left, center, right

Demo

Button
Fill Diagonal
Zoom In
Slide Left
Slide Right
Slide Down
Slide Up
Lift
Shrink

Icon List

List items with icons instead of bullets

Replace boring bullet points with engaging icons. Perfect for feature lists, benefits, services, and any list that deserves visual enhancement.

Icon per item – Different icon for each list item

Consistent styling – Or customize individually

Flexible layout – Horizontal or vertical

Spacing control – Gap between items

Color inheritance – Or custom colors per item

Any content – Rich content inside list items

Alignment options – Icon and text alignment

Demo

Here’s a list

With a description

Just the heading

Or just a paragraph if you want

Pill

Rounded badge/tag for labels and categories

Display small text labels with rounded backgrounds. Perfect for tags, categories, status indicators, and inline badges.

Tight wrapping – Hugs content closely

Inline display – Flows with text

Full color control – Text and background

Border support – Optional borders

Size options – Small to large presets

Alignment – Left, center, right

Gradient support – Colorful gradient backgrounds

Demo

Perfect for labels
Or eyebrows

Progress Bar

Animated progress indicator for stats and metrics

Display progress or statistics with an animated bar that fills when scrolled into view. Perfect for showing completion, skills, or any percentage-based data.

Animated fill – Smooth animation on scroll

Percentage display – Show or hide percentage

Label support – Custom label text

Multiple styles – Solid, striped, animated stripes

Color control – Bar and background colors

Height control – Thin or thick bars

Border radius – Rounded or sharp corners

Label positioning – Top, bottom, or inline

Demo

75%
Add a label – Remove Percentage
Inside the bar – 41%
Label below – 88%

Divider

Visual separator between content sections

Create visual breaks between content with customizable dividers. More than just a line – add patterns, colors, and spacing.

Multiple styles – Solid, dashed, dotted, double

Height control – Thin to thick

Color customization – Match your brand

Width control – Full width or constrained

Spacing – Top and bottom margins

Pattern options – Wave, zigzag, and more

Gradient support – Colorful dividers

Demo

Blobs

Organic SVG shapes for backgrounds

Add modern, organic blob shapes as decorative background elements. Perfect for adding visual interest and breaking up traditional layouts.

Multiple blob shapes – Various organic forms

Color control – Solid colors or gradients

Size and positioning – Place anywhere

Rotation – Rotate to fit your design

Opacity control – Subtle or bold

Layering – Stack multiple blobs

Animation – Optional morph animation

Demo

Animate

Your blob

Spin Animation

Pulse Animation

Float Animation