Design Library

af:User Circle

af:Settings

af:Home

How to Use

1. Click on any icon to open the editor

2. Customize the appearance and behavior using the controls

3. Copy the generated code or download the icon

Example Usage:

import { Icon } from '@ariaframe/icons';

// Basic usage with af: prefix
<Icon name="af:User Circle" />

// With style and variant
<Icon name="af:User Circle" iconStyle="minimal" variant="filled" />

// With size and color
<Icon name="af:User Circle" size="lg" color="primary" />

// With animation and timing
<Icon 
  name="af:User Circle" 
  animation="spin" 
  animationDuration="fast"
  animationDirection="alternate"
  animationIterationCount={3}
  animationDelay={0.5}
  animationTimingFunction="ease-in-out"
/>

// Custom size
<Icon name="af:User Circle" size={48} />

// Custom color using className
<Icon name="af:User Circle" className="text-blue-500" />

// Dark mode support
<Icon name="af:User Circle" color="current" />

// Multiple icons with different styles
<div className="flex gap-4">
  <Icon name="af:User Circle" iconStyle="default" />
  <Icon name="af:User Circle" iconStyle="minimal" />
  <Icon name="af:User Circle" iconStyle="sharp" />
</div>

// Animated icons
<div className="flex gap-4">
  <Icon name="af:User Circle" animation="spin" />
  <Icon name="af:User Circle" animation="pulse" />
  <Icon name="af:User Circle" animation="bounce" />
</div>

// Custom icon names (will be converted to kebab-case)
<Icon name="af:My Custom Icon" />
<Icon name="af:User Profile Icon" />
<Icon name="af:Settings Gear" />

// Download icon as SVG
import { downloadIcon } from '@ariaframe/icons';

// In your click handler
downloadIcon('af:User Circle');