Icon List

A compact list pairing small icons with guarantee statements like free shipping and easy returns. Fits neatly in a sidebar or below the buy section.

import {
  Shield,
  Truck,
  HeadphonesIcon,
  CreditCard,
  RotateCcw,
} from "lucide-react";

export default function TrustGuaranteeIconList() {
  const trustFeatures = [
    {
      icon: Shield,
      title: "SSL Encrypted",
      description: "Your data is protected with bank-level security",
    },
    {
      icon: RotateCcw,
      title: "30-Day Returns",
      description: "Full refund if you're not completely satisfied",
    },
    {
      icon: Truck,
      title: "Free Shipping",
      description: "On orders over $50 with fast delivery",
    },
    {
      icon: CreditCard,
      title: "Secure Payments",
      description: "Multiple payment options, all fully protected",
    },
    {
      icon: HeadphonesIcon,
      title: "24/7 Support",
      description: "Real people ready to help when you need it",
    },
  ];

  return (
    <div className="px-4 py-8 md:py-12">
      <div className="mx-auto max-w-md">
        <div className="space-y-4">
          {trustFeatures.map((feature, index) => {
            const IconComponent = feature.icon;
            return (
              <div key={index} className="flex items-start gap-3">
                <div className="mt-0.5 flex-shrink-0">
                  <div className="bg-muted flex h-8 w-8 items-center justify-center rounded-full">
                    <IconComponent className="text-muted-foreground h-4 w-4" />
                  </div>
                </div>
                <div className="min-w-0 flex-1">
                  <h3 className="text-foreground mb-1 text-sm font-medium">
                    {feature.title}
                  </h3>
                  <p className="text-muted-foreground text-sm leading-relaxed">
                    {feature.description}
                  </p>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}

About this block

Icon List is a compact vertical stack of five trust statements. Each row pairs a small circular icon container on the left with a short bold title and a one-line description on the right. The icons cover SSL encryption, 30-day returns, free shipping, secure payments, and 24/7 support, read top to bottom in the order a buyer scans a product sidebar.

Every row is independent. You can swap the icon, rewrite the title and description, or remove rows you do not need without affecting the others. The narrow max-width keeps the list tidy in constrained spaces like a product detail sidebar or a checkout summary panel.

When to use

Reach for this block when you need to reassure a buyer without taking up much horizontal space. It fits naturally in the right rail of a property detail page on a real estate marketplace, where a visitor weighing a large decision wants a quick read on data security, support availability, and refund terms before they commit. It works better than a wide badge row in tight column layouts because the vertical flow never breaks at small sizes.

A natural flow around it on an Ecommerce page:

Before

Product Overview to give the buyer the listing details and the primary call to action
Customer Reviews to surface social proof above the guarantee list

After

Shipping Returns to expand on the returns and delivery promises already summarised here
Three Pillars if you want a wider trust section further down the page

What you can display

Five guarantee points is the default, but the list adapts to whatever commitments matter most to your buyers. Some directions to consider:

Listing-specific policies. On a real estate marketplace, swap the default items for data privacy, agent availability, and deposit protection to match what buyers actually worry about.
Tiered membership perks. Show the benefits unlocked at the current plan tier so the list doubles as an upgrade prompt near the buy button.
Post-purchase reassurance. Reframe the items around what happens after the transaction, such as dedicated onboarding support and a satisfaction window, to reduce post-purchase doubt.

Tip: keep descriptions to one short sentence each so the full list stays readable without scrolling in a narrow sidebar column.

About this block

When to use

A natural flow around it on an Ecommerce page:

Before

Product Overview to give the buyer the listing details and the primary call to action
Customer Reviews to surface social proof above the guarantee list

After

Shipping Returns to expand on the returns and delivery promises already summarised here
Three Pillars if you want a wider trust section further down the page

What you can display

Five guarantee points is the default, but the list adapts to whatever commitments matter most to your buyers. Some directions to consider:

Listing-specific policies. On a real estate marketplace, swap the default items for data privacy, agent availability, and deposit protection to match what buyers actually worry about.
Tiered membership perks. Show the benefits unlocked at the current plan tier so the list doubles as an upgrade prompt near the buy button.
Post-purchase reassurance. Reframe the items around what happens after the transaction, such as dedicated onboarding support and a satisfaction window, to reduce post-purchase doubt.

Tip: keep descriptions to one short sentence each so the full list stays readable without scrolling in a narrow sidebar column.

Icon List

About this block

When to use

What you can display

Search Shadcn UI Blocks

About this block

When to use

What you can display