Icons

Usage

import { SecurityCamera, ShieldCheck, Eye } from '@phosphor-icons/react';

/* Basic usage */
<SecurityCamera size={24} weight="regular" />
<ShieldCheck size={32} weight="duotone" />

/* As component prop (IconBoxGrid, IconBoxScroll) */
<IconBoxGrid items={[
  {
    icon: <SecurityCamera size={24} weight="duotone" />,
    title: 'AI Surveillance',
    description: '24/7 monitoring'
  }
]} />

/* In TwoTabImageLink items */
items={[{
  icon: <Eye size={24} weight="duotone" />,
  label: 'AI Detection',
  title: 'Smart Monitoring',
  body: '...',
  linkText: 'Learn More →',
  linkUrl: '/features/ai'
}]}

/* Weight variants */
<Shield weight="thin" />      {/* Minimal */}
<Shield weight="light" />     {/* Subtle */}
<Shield weight="regular" />   {/* Default */}
<Shield weight="bold" />      {/* Emphasis */}
<Shield weight="fill" />      {/* Solid/Active */}
<Shield weight="duotone" />   {/* Featured/Hero */}