→ Jordan McKenzie
→ Features list with icons

Features list with icons

This Example is contributed by Jordan McKenzie, on 27-Feb-2025. It is responsive.

Hover Effect Icon List Card List Information Display

<div class="icon-list-container">
  <ul class="icon-list">
    <li class="icon-list-item">
      <div class="icon">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
          <path fill="none" d="M0 0h24v24H0z"/>
          <path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm-1-5h2v2h-2v-2zm0-8h2v6h-2V7z" fill="currentColor"/>
        </svg>
      </div>
      <div class="content">
        <h3>Important Information</h3>
        <p>Essential details about our product features and benefits.</p>
      </div>
    </li>
    <li class="icon-list-item">
      <div class="icon">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
          <path fill="none" d="M0 0h24v24H0z"/>
          <path d="M4 3h16a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1zm1 2v14h14V5H5zm6.003 11L6 10.5l1-1 4 3.5 6-5.5 1 1-7 6.5z" fill="currentColor"/>
        </svg>
      </div>
      <div class="content">
        <h3>Verified Quality</h3>
        <p>All our products undergo strict quality control measures.</p>
      </div>
    </li>
    <li class="icon-list-item">
      <div class="icon">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
          <path fill="none" d="M0 0h24v24H0z"/>
          <path d="M17.841 15.659l.176.177.178-.177a2.25 2.25 0 0 1 3.182 3.182l-3.36 3.359-3.358-3.359a2.25 2.25 0 0 1 3.182-3.182zM12 14v2a6 6 0 0 0-6 6H4a8 8 0 0 1 7.75-7.996L12 14zm0-13c3.315 0 6 2.685 6 6a5.998 5.998 0 0 1-5.775 5.996L12 13c-3.315 0-6-2.685-6-6a5.998 5.998 0 0 1 5.775-5.996L12 1zm0 2C9.79 3 8 4.79 8 7s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4z" fill="currentColor"/>
        </svg>
      </div>
      <div class="content">
        <h3>Customer Satisfaction</h3>
        <p>Over 10,000 happy customers with excellent feedback.</p>
      </div>
    </li>
    <li class="icon-list-item">
      <div class="icon">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
          <path fill="none" d="M0 0h24v24H0z"/>
          <path d="M3 3h18a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1zm17 8H4v8h16v-8zm0-2V5H4v4h16zm-5-3h4v2h-4V6z" fill="currentColor"/>
        </svg>
      </div>
      <div class="content">
        <h3>Secure Payments</h3>
        <p>Multiple secure payment options available for your convenience.</p>
      </div>
    </li>
    <li class="icon-list-item">
      <div class="icon">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
          <path fill="none" d="M0 0h24v24H0z"/>
          <path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-4.987-3.744A7.966 7.966 0 0 0 12 20c1.97 0 3.773-.712 5.167-1.892A6.979 6.979 0 0 0 12.16 16a6.981 6.981 0 0 0-5.147 2.256zM5.616 16.82A8.975 8.975 0 0 1 12.16 14a8.972 8.972 0 0 1 6.362 2.634 8 8 0 1 0-12.906.187zM12 13a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm0-2a2 2 0 1 0 0-4 2 2 0 0 0 0 4z" fill="currentColor"/>
        </svg>
      </div>
      <div class="content">
        <h3>24/7 Support</h3>
        <p>Our dedicated support team is available around the clock.</p>
      </div>
    </li>
  </ul>
</div>

Related Examples

Interactive Hover Effect Navigation Links
A modern, animated list of links with smooth hover effects perfect for navigation menus, resource pages, or sidebar components.

Author:
Alexandra Sinclair

7 months ago
3-Column Responsive List Grid for Modern Web Layouts

Author:
Anonymous

7 months ago
Feature Card Grid Layout
A clean, responsive grid layout showcasing product or service features with icon illustrations and descriptive text.

Author:
MD. Tayyub

7 months ago
Feature Cards with Hover Effects

Author:
Sammy Rodriguez

7 months ago
Responsive Feature Card Grid Layout
A responsive card grid system that adapts from 1 to 4 columns based on screen size, perfect for showcasing product features or service offerings.

Author:
Maya Johnson

6 months ago
Modern Stacked List Component
A responsive stacked list component with elegant hover animations, perfect for displaying content in a clean, organized format.

Author:
Jorrit

7 months ago
Elegant Product Features List with Inner Border Styling
Showcase your product's key selling points with this clean features list that uses subtle inner borders for improved readability and visual organization.

Author:
Alex Morgan

7 months ago
Responsive Feature Grid Cards for Modern Websites
Showcase your product's key features with these responsive grid layout cards. Perfect for highlighting services, benefits, or product specifications on landing pages.

Author:
Morgan

7 months ago
Feature Showcase Grid with Icons
A responsive grid layout showcasing key features with accompanying icons to enhance visual appeal and improve user engagement.

Author:
Anonymous

7 months ago
List with Highlighted Text Elements

Author:
Anonymous

7 months ago
Feature Showcase Grid with Icons
A responsive features showcase grid displaying your product's key capabilities with animated icons and clean descriptions.

Author:
Mert Yılmaz

7 months ago
Modern Info Cards with Hover Effects
A set of clean, modern information cards with smooth hover effects to showcase your content in an engaging way.

Author:
Julian Parker

7 months ago

Didn't find component you were looking for?

Search from 500+ components