The widget library for WordPress is here Download plugin

Feature Grid with Circular Icons

Free

Elevate your "Why Choose Us" or "Product Features" section with this Feature Grid with Circular Icons. This widget provides a polished, professional layout designed to break down complex value propositions into easily digestible cards.

The visual centerpiece of each card is a customizable circular icon container. Unlike standard bullet points, these distinct circles create a strong visual hierarchy, drawing the eye immediately to your key selling points. The default design features a crisp SVG checkmark, symbolizing validation and quality, but the colors are fully adaptable to your brand. You can edit the Circle Background Color (e.g., to match a soft brand pastel) and the Icon Stroke Color independently.

Beyond visuals, this widget offers complete typography control. You are not locked into a preset style; you can adjust the Font Family, Font Size, and Text Color for the main section headline, feature titles, and body descriptions directly within the editor. The layout is built on a responsive CSS grid, ensuring your features look perfect on everything from wide desktop monitors to mobile screens.

Key Features:

  • Circular Icon Containers: A modern design trend that frames your icons elegantly. Both the circle fill color and the icon stroke color are fully editable.
  • Total Typography Freedom: Customize font weights, families, sizes, and colors for every text element to ensure perfect brand consistency.
  • Responsive Card Layout: Automatically adjusts from a 2-column grid on desktop to a stacked single-column layout on mobile devices.
  • Vector SVG Graphics: Uses inline SVGs for the checkmarks, ensuring they remain sharp and pixel-perfect on high-resolution Retina displays.
  • Dynamic Slide Management: Easily scale your feature list by adding, duplicating, or removing cards using the intuitive slide interface.

How to use this widget

  • Change your content and adjust the styles to match your design
  • Click export and copy the code
  • Paste it on your web page by adding a code/html block in your website builder (e.g., Squarespace, WordPress, Webflow, Wix) and paste the code.

👋 P.S. Have questions? Leave a comment.