Examples & Patterns

import { Home, User, Settings, Mail, Bell } from 'iconest-react'

function NavigationMenu() {
  const menuItems = [
    { icon: Home, label: 'Dashboard', href: '/' },
    { icon: User, label: 'Profile', href: '/profile' },
    { icon: Mail, label: 'Messages', href: '/messages' },
    { icon: Bell, label: 'Notifications', href: '/notifications' },
    { icon: Settings, label: 'Settings', href: '/settings' }
  ]

  return (
    <nav className="flex space-x-4">
      {menuItems.map(({ icon: Icon, label, href }) => (
        <a
          key={href}
          href={href}
          className="flex items-center space-x-2 px-3 py-2 rounded-lg hover:bg-gray-100 transition-colors"
        >
          <Icon size={20} />
          <span className="hidden sm:inline">{label}</span>
        </a>
      ))}
    </nav>
  )
}

import { Plus, Download, Share, Trash, Edit } from 'iconest-react'

function ButtonExamples() {
  return (
    <div className="flex flex-wrap gap-4">
      {/* Primary with icon */}
      <button className="bg-blue-500 text-white px-4 py-2 rounded-lg flex items-center gap-2 hover:bg-blue-600">
        <Plus size={16} />
        Add Item
      </button>

      {/* Icon-only button */}
      <button className="p-2 rounded-lg border hover:bg-gray-50">
        <Download size={16} />
      </button>

      {/* Outline with icon */}
      <button className="border border-gray-300 px-4 py-2 rounded-lg flex items-center gap-2 hover:bg-gray-50">
        <Share size={16} />
        Share
      </button>

      {/* Danger button */}
      <button className="bg-red-500 text-white px-4 py-2 rounded-lg flex items-center gap-2 hover:bg-red-600">
        <Trash size={16} />
        Delete
      </button>

      {/* Text button */}
      <button className="text-blue-500 px-2 py-1 rounded flex items-center gap-1 hover:bg-blue-50">
        <Edit size={14} />
        Edit
      </button>
    </div>
  )
}