Design-system

Foundation
  • Color
  • Typography
  • Spacing
  • Border Radius
  • Shadow
  • Grid System
  • Breakpoints
  • Animation
  • Transition
  • Z-Index
  • Dark Mode
  • Design Tokens
  • CSS Variables
  • Theme Engine
  • Theme Presets
Layout
  • Section
  • Container
  • Row
  • Column
  • Grid
  • Flex Layout
  • Sidebar Layout
  • Split Layout
  • Dashboard Layout
  • Sticky Header
  • Sticky Sidebar
  • Offcanvas Layout
  • Masonry Layout
Navigation
  • Navbar
  • Mega Menu
  • Sidebar Navigation
  • Mobile Navigation
  • Breadcrumb
  • Pagination
  • Tabs
  • Dropdown Menu
  • Anchor Navigation
  • Table Of Contents
Actions
  • Primary Button
  • Secondary Button
  • Outline Button
  • Ghost Button
  • Link Button
  • Icon Button
  • Floating Action Button
  • Loading Button
  • Button Group
  • Social Buttons

Components

Forms
  • Text Input
  • Textarea
  • Select
  • Tom Select
  • Multi Select
  • Ajax Select
  • Tag Input
  • Checkbox
  • Radio Button
  • Toggle Switch
  • Range Slider
  • Search Input
  • Date Picker
  • Time Picker
  • File Upload
  • Input Group
  • Form Validation
  • Contact Form
  • Newsletter Form
  • Lead Form
Overlay
  • Modal
  • Drawer
  • Offcanvas
  • Tooltip
  • Popover
  • Alert Dialog
  • Lightbox
  • Cookie Notice
  • Age Verification
  • Announcement Popup
Data Display
  • Card
  • Accordion
  • Timeline
  • List Group
  • Badge
  • Chip
  • Avatar
  • Statistic Card
  • Feature Card
  • Pricing Card
  • Team Member Card
  • Testimonial Card
  • FAQ Item
Feedback
  • Alert
  • Toast
  • Notification
  • Progress Bar
  • Spinner
  • Skeleton
  • Empty State
  • Error State
  • Success State
  • Maintenance State
Media
  • Single Image
  • Image Gallery
  • Carousel
  • Slider
  • Video
  • Video Popup
  • Before After
  • Logo Cloud
  • Logo Carousel
  • Icon Showcase
  • Icon Picker
  • Map Embed
Tables
  • Basic Table
  • Responsive Table
  • Sortable Table
  • Data Grid
  • Pricing Table
  • Comparison Table
Dashboard
  • KPI Card
  • Statistics Card
  • Revenue Widget
  • Sales Widget
  • Orders Widget
  • Bar Chart
  • Line Chart
  • Pie Chart
  • Area Chart
  • Sparkline
  • Activity Feed

Ecommerce

Products
  • Product Card
  • Product Grid
  • Product List
  • Product Gallery
  • Product Quick View
  • Product Variant Selector
  • Product Rating
  • Product Review
  • Product Badge
  • Product Tabs
  • Product Comparison
  • Product Bundle
  • Stock Indicator
  • Price Display
  • Related Products
  • Recently Viewed Products
Category & Discovery
  • Category Card
  • Category Grid
  • Collection Banner
  • Collection Grid
  • Collection Carousel
  • Brand Grid
  • Brand Card
  • Featured Collection
Search & Filter
  • Search Bar
  • Search Result
  • Search Suggestion
  • Filter Sidebar
  • Filter Drawer
  • Price Filter
  • Brand Filter
  • Category Filter
  • Active Filter Chips
  • Sort Toolbar
  • No Result State
Cart
  • Mini Cart
  • Cart Drawer
  • Cart Table
  • Cart Summary
  • Coupon Form
  • Shipping Calculator
  • Free Shipping Progress
  • Cart Upsell
  • Save For Later
Checkout
  • Checkout Steps
  • Billing Form
  • Shipping Form
  • Payment Method
  • Order Summary
  • Order Tracking
  • Invoice View
  • Payment Status
  • Order Success
Customer Account
  • Login
  • Register
  • Forgot Password
  • Reset Password
  • Profile
  • Address Book
  • Order History
  • Wishlist
  • Notifications
  • Loyalty Points
Trust & Conversion
  • Trust Badge
  • Payment Icons
  • Shipping Icons
  • Guarantee Banner
  • Secure Checkout
  • Recently Purchased
  • Return Policy
  • Customer Satisfaction
  • Store Statistics
  • Social Proof

Blocks

Content Blocks
  • Heading
  • Text
  • Rich Text
  • Divider
  • Spacer
  • Icon
  • Button
  • Alert
  • Badge
  • Quote
  • Pull Quote
  • Code Block
  • Syntax Highlight
  • Table Of Contents
  • Reading Progress
Marketing Blocks
  • Hero Section
  • CTA Section
  • Feature Grid
  • Feature List
  • Icon Box
  • Testimonial
  • Testimonial Slider
  • FAQ
  • Statistics
  • Counter
  • Countdown
  • Brand Logos
  • Trust Badges
  • Newsletter
  • Announcement Bar
  • Promo Banner
  • Popup Offer
Team & Company
  • Team Grid
  • Team Carousel
  • Team Member Profile
  • Organization Chart
  • Company Timeline
  • Vision Mission
  • Values Section
  • Awards Section
  • Partners Section
  • Client Logos
Blog & Content
  • Post Grid
  • Post List
  • Post Carousel
  • Featured Post
  • Recent Posts
  • Related Posts
  • Author Box
  • Author Grid
  • Categories Grid
  • Tags Cloud
  • Reading Progress
  • Share Buttons
  • Comments Section
Portfolio Blocks
  • Portfolio Grid
  • Portfolio Masonry
  • Portfolio Carousel
  • Project Showcase
  • Case Study
  • Before After
  • Client Showcase

Utilities

Builder Widgets
  • Hero Widgets
  • Banner Widgets
  • Product Widgets
  • Blog Widgets
  • Team Widgets
  • Portfolio Widgets
  • Marketing Widgets
  • Content Widgets
  • Ecommerce Widgets
  • Dynamic Widgets
Page Templates
  • Homepage
  • Landing Page
  • Company Profile
  • Team Page
  • Services Page
  • Portfolio Page
  • Blog Homepage
  • Single Post
  • Knowledge Base
  • FAQ Page
  • Contact Page
  • Product Detail
  • Category Page
  • Cart Page
  • Checkout Page
  • Account Page
Full Pages
  • Error 404
  • Error 500
  • Maintenance
  • Coming Soon
  • Access Denied
Accessibility
  • Focus Management
  • ARIA Patterns
  • Keyboard Navigation
  • Color Contrast
  • Skip Navigation
  • Screen Reader Support
  • Accessibility Audit Checklist
Developer Utilities
  • Component Playground
  • Theme Builder
  • Theme Switcher
  • Responsive Preview
  • Variant Generator
  • Code Snippets
  • DaisyUI Showcase
  • SortableJS Showcase
  • Drag Drop Builder
  • Nested Sortable
  • Widget Registry
  • Component Registry
  • Block Registry
  • Template Registry
  • Design Token Generator
Component Library › Media › Icon Picker
← Previous Icon Showcase Next Map Embed →

Icon Picker

Searchable icon selector input component.

This page is a scaffold for the Icon Picker component. Build the live markup, Alpine.js interactions, and DaisyUI/Tailwind classes here, then replace this placeholder block with the real preview + code snippet.

Planned variants & states to implement:

  • Search by name
  • Category filter tabs
  • Selected icon preview
  • Copy code button
  • Color / size controls

Other Components in Media

11

Single Image

Responsive image with aspect ratio, caption, and lazy loading.

Image Gallery

Grid-based image gallery with lightbox and masonry options.

Carousel

Auto-play and manual image/content carousel with indicators.

Slider

Content slider with navigation arrows and swipe support.

Video

Embedded video player with poster, controls, and aspect ratio.

Video Popup

Thumbnail with play button that opens video in a modal.

Before After

Drag-handle image comparison slider.

Logo Cloud

Static grid of partner or client logos.

Logo Carousel

Auto-scrolling marquee of logos.

Icon Showcase

Browsable icon grid with copy-to-clipboard support.

Map Embed

Embedded Google Maps or OpenStreetMap with marker and controls.

← Previous Icon Showcase Next Map Embed →