→ Julian Parker
→ Information Chips with Custom Icons

Information Chips with Custom Icons

A collection of sleek information chips with integrated icons that provide visual context for different types of notifications or statuses.

This Example is contributed by Julian Parker, on 12-Mar-2025. It is responsive. similar terms for this example are Toast, Snackbar,tags

Badge Notification Chip

Author Julian Parker

Fork Fullscreen

<div class="info-chips-container">
  <div class="info-chip success">
    <span class="icon">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" fill="currentColor">
        <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"></path>
      </svg>
    </span>
    <span class="text">Task completed successfully</span>
  </div>
  
  <div class="info-chip warning">
    <span class="icon">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" fill="currentColor">
        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"></path>
      </svg>
    </span>
    <span class="text">Update required</span>
  </div>
  
  <div class="info-chip error">
    <span class="icon">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" fill="currentColor">
        <path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"></path>
      </svg>
    </span>
    <span class="text">Connection failed</span>
  </div>
  
  <div class="info-chip info">
    <span class="icon">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" fill="currentColor">
        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"></path>
      </svg>
    </span>
    <span class="text">New features available</span>
  </div>
  
  <div class="info-chip neutral">
    <span class="icon">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" fill="currentColor">
        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5-9h10v2H7z"></path>
      </svg>
    </span>
    <span class="text">System maintenance</span>
  </div>
</div>

Related Examples

Badges designs
A collection of sleek, versatile information badges to display status, labels, and important information on your website or application.

Author:
Alexandra Sinclair

6 months ago
Status Alert Component with CSS
A collection of clean, responsive alert components with success, error, warning, and info variants for web applications.

Author:
Alex Morgan

5 months ago
Glassmorphism Alert Component with Notification Icons
A glass-effect alert card with status icons that displays notifications in a modern transparent style, perfect for dashboards and admin panels.

Author:
Liam Reynolds

5 months ago
Closable Toast Notifications
A lightweight toast notification system that displays messages in the bottom-right corner of the screen with smooth animations and a close button for user dismissal.

Author:
Anika

5 months ago
Customizable Toast Alert Component for Websites
A versatile toast notification component that displays temporary messages to users with various styling options including success, error, and warning alerts.

Author:
Anonymous

5 months ago
Dismissible Alerts

Author:
M. Johnson

6 months ago
Company Logo Chips with Icon Display
Display company logos and brand icons in a clean chip format with hover effects and responsive design for showcasing business partnerships or client portfolios.

Author:
Mert Yılmaz

3 months ago
Fixed Top-Right Alert Notification Component
A responsive fixed-position alert that appears in the top-right corner of the screen, providing important notifications without disrupting user workflow.

Author:
Morgan Reynolds

5 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

5 months ago
Button Collection

Author:
Anonymous

5 months ago
Dashboard Statistics Cards
Responsive statistics cards with vibrant color schemes designed to highlight key performance indicators for data-driven applications.

Author:
Jordan McKenzie

6 months ago
Dashboard KPI Stat Cards with Icons
A collection of clean and responsive stat cards to display key performance indicators and metrics on dashboards, featuring customizable icons and color schemes.

Author:
Eliza Stone

5 months ago

Didn't find component you were looking for?

Search from 500+ components