Props Reference

Icon Component Props

All Anicon components share a consistent props interface, making them easy to use and customize. Every icon accepts the same core props plus all standard SVG attributes.

Core Props

These props are available on every Anicon component.

size

number

default:"24"

The size of the icon in pixels. Sets both width and height to maintain a square aspect ratio.

<IconHeart size={16} /> // Small
<IconHeart size={24} /> // Default
<IconHeart size={32} /> // Medium
<IconHeart size={48} /> // Large

strokeWidth

number

default:"2"

The width of the icon’s stroke in pixels. Affects the thickness/boldness of the icon lines.

<IconHeart strokeWidth={1} />  // Thin
<IconHeart strokeWidth={2} />  // Default
<IconHeart strokeWidth={3} />  // Bold
<IconHeart strokeWidth={4} />  // Extra bold

className

string

CSS classes to apply to the icon. Commonly used for colors, spacing, and custom styles.

// Tailwind CSS classes
<IconHeart className="text-rose-500" />
<IconHeart className="text-blue-400 hover:text-blue-500" />
<IconHeart className="text-emerald-400 w-6 h-6" />

// Custom CSS classes
<IconHeart className="my-custom-icon" />

The className prop is merged with the icon’s internal classes. Colors are controlled via the text-* utility classes since icons use stroke="currentColor".

Standard SVG Props

All Anicon components extend React.SVGProps<SVGSVGElement>, meaning they accept all standard SVG attributes.

Common SVG Attributes

string

HTML id attribute for the SVG element.

<IconHeart id="favorite-heart" />

aria-label

string

Accessibility label for screen readers.

<IconHeart aria-label="Add to favorites" />
<IconTrash aria-label="Delete item" />

Always provide aria-label for icon-only buttons to ensure accessibility.

aria-hidden

boolean

Hide the icon from screen readers when it’s purely decorative.

<button>
  <IconHeart aria-hidden="true" />
  Add to Favorites
</button>

role

string

ARIA role for the element.

<IconHeart role="img" aria-label="Heart icon" />

style

React.CSSProperties

Inline styles for the SVG element.

<IconHeart style={{ color: '#ef4444', marginRight: '8px' }} />

viewBox

string

default:"0 0 24 24"

The SVG viewBox attribute. Generally not needed as icons have a default viewBox.

<IconHeart viewBox="0 0 24 24" />

SVG Stroke Attributes

stroke

string

default:"currentColor"

The stroke color. By default, icons use currentColor to inherit text color from CSS.

<IconHeart stroke="#ef4444" />
<IconHeart stroke="rgb(239, 68, 68)" />

Prefer using className with Tailwind’s text-* utilities instead of the stroke prop for better consistency.

strokeLinecap

'butt' | 'round' | 'square'

default:"round"

The shape of stroke endpoints.

strokeLinejoin

'miter' | 'round' | 'bevel'

default:"round"

The shape of stroke corners.

fill

string

default:"none"

The fill color for the icon. Most Anicon icons use strokes, so fill is typically "none".

<IconHeart fill="#ef4444" />

Event Handlers

All standard React event handlers are supported.

onClick

(event: React.MouseEvent) => void

Click event handler.

<IconHeart 
  onClick={(e) => console.log('Heart clicked!')} 
  className="cursor-pointer"
/>

onMouseEnter

(event: React.MouseEvent) => void

Mouse enter event handler.

<IconHeart onMouseEnter={() => setHovered(true)} />

onMouseLeave

(event: React.MouseEvent) => void

Mouse leave event handler.

<IconHeart onMouseLeave={() => setHovered(false)} />

onFocus

(event: React.FocusEvent) => void

Focus event handler.

<IconHeart onFocus={() => console.log('Focused')} />

onBlur

(event: React.FocusEvent) => void

Blur event handler.

Framer Motion’s animation event handlers (onAnimationStart, onAnimationEnd) and drag handlers (onDragStart, onDrag, onDragEnd) are filtered out internally to prevent conflicts. These props are not available on Anicon components.

TypeScript Interface

Here’s the exact TypeScript interface used by all Anicon components:

icon-heart.tsx

export interface IconHeartProps extends React.SVGProps<SVGSVGElement> {
  /** Size in pixels. Default 24 */
  size?: number;
  /** Stroke width. Default 2 */
  strokeWidth?: number;
}

export function IconHeart({ 
  size = 24, 
  strokeWidth = 2, 
  className, 
  ...props 
}: IconHeartProps) {
  const {
    onAnimationStart,
    onAnimationEnd,
    onDragStart,
    onDrag,
    onDragEnd,
    ...rest
  } = props;
  
  // Animation and rendering logic...
}

While the interface is named IconHeartProps, each icon component has its own interface (e.g., IconBellProps, IconLoaderProps) following the pattern Icon{Name}Props. They all extend React.SVGProps<SVGSVGElement> with the same size and strokeWidth additions.

Usage Examples

Basic Usage

import { IconHeart } from "@/components/icons/icon-heart";

function Example() {
  return <IconHeart />; // Uses all defaults
}

Customized Icon

import { IconHeart } from "@/components/icons/icon-heart";

function Example() {
  return (
    <IconHeart 
      size={32}
      strokeWidth={3}
      className="text-rose-500 hover:text-rose-600"
    />
  );
}

Interactive Button

import { IconHeart } from "@/components/icons/icon-heart";
import { useState } from "react";

function FavoriteButton() {
  const [liked, setLiked] = useState(false);
  
  return (
    <button
      onClick={() => setLiked(!liked)}
      className="p-2 rounded-lg hover:bg-gray-100"
      aria-label={liked ? "Remove from favorites" : "Add to favorites"}
    >
      <IconHeart
        className={liked ? "text-rose-500" : "text-gray-400"}
        size={24}
      />
    </button>
  );
}

Multiple Icons with Consistent Styling

import { IconHeart, IconStar, IconBookmark } from "@/components/icons";

function ActionBar() {
  const iconProps = {
    size: 20,
    strokeWidth: 2,
    className: "text-gray-600 hover:text-gray-900"
  };
  
  return (
    <div className="flex gap-2">
      <button><IconHeart {...iconProps} /></button>
      <button><IconStar {...iconProps} /></button>
      <button><IconBookmark {...iconProps} /></button>
    </div>
  );
}

Responsive Sizing

import { IconMenu } from "@/components/icons/icon-menu";

function Navigation() {
  return (
    <button className="md:hidden">
      {/* Larger on small screens */}
      <IconMenu 
        size={32}
        className="text-gray-700 sm:w-6 sm:h-6"
      />
    </button>
  );
}

Accessibility Example

import { IconTrash, IconEdit, IconDownload } from "@/components/icons";

function DocumentActions() {
  return (
    <div role="group" aria-label="Document actions">
      <button aria-label="Edit document">
        <IconEdit size={20} aria-hidden="true" />
      </button>
      <button aria-label="Download document">
        <IconDownload size={20} aria-hidden="true" />
      </button>
      <button aria-label="Delete document">
        <IconTrash size={20} aria-hidden="true" />
      </button>
    </div>
  );
}

Custom Styling

import { IconLoader } from "@/components/icons/icon-loader";

function LoadingSpinner() {
  return (
    <IconLoader
      size={40}
      strokeWidth={2}
      className="text-blue-500"
      style={{ filter: 'drop-shadow(0 0 8px rgba(59, 130, 246, 0.5))' }}
    />
  );
}

Best Practices

Use Semantic Sizing

Choose sizes that match your design system:

16px - Small icons in compact UI
20px - Default icon size in text
24px - Standard icon size (default)
32px - Larger interactive elements
48px+ - Hero sections or feature highlights

Maintain Consistent Stroke Width

Use consistent strokeWidth across your application:

1px - Thin, delicate icons
2px - Standard weight (default)
3px - Bold, prominent icons

Avoid mixing stroke widths within the same UI section.

Color with Tailwind Utilities

Prefer Tailwind’s text-* utilities over direct stroke colors:

// Good
<IconHeart className="text-rose-500" />

// Avoid
<IconHeart stroke="#ef4444" />

This maintains consistency with your design system and enables easy theme switching.

Always Provide Accessibility Labels

For icon-only buttons, always include aria-label:

// Interactive icons need labels
<button aria-label="Close dialog">
  <IconX />
</button>

// Decorative icons should be hidden
<div>
  <IconCheck aria-hidden="true" />
  Success!
</div>

Leverage Hover States

Combine icon animations with CSS transitions:

<button className="group">
  <IconArrowRight className="text-blue-500 transition-colors group-hover:text-blue-600" />
</button>

The icon’s built-in Framer Motion animation works beautifully with CSS transitions.

Common Patterns

Icon with Text

import { IconHeart } from "@/components/icons/icon-heart";

function LikeButton() {
  return (
    <button className="flex items-center gap-2">
      <IconHeart size={20} />
      <span>Like</span>
    </button>
  );
}

Loading State

import { IconLoader } from "@/components/icons/icon-loader";

function SubmitButton({ isLoading }: { isLoading: boolean }) {
  return (
    <button disabled={isLoading}>
      {isLoading ? (
        <IconLoader size={20} className="text-white" />
      ) : (
        "Submit"
      )}
    </button>
  );
}

Icon Grid

import { IconHome, IconSearch, IconUser, IconSettings } from "@/components/icons";

function AppGrid() {
  const apps = [
    { icon: IconHome, label: "Home" },
    { icon: IconSearch, label: "Search" },
    { icon: IconUser, label: "Profile" },
    { icon: IconSettings, label: "Settings" },
  ];
  
  return (
    <div className="grid grid-cols-2 gap-4">
      {apps.map(({ icon: Icon, label }) => (
        <button key={label} className="flex flex-col items-center gap-2">
          <Icon size={32} />
          <span className="text-sm">{label}</span>
        </button>
      ))}
    </div>
  );
}

Icon Library

Component API

Props Reference

Icon Component Props

Core Props

Standard SVG Props

Common SVG Attributes

SVG Stroke Attributes

Event Handlers

TypeScript Interface

Usage Examples

Basic Usage

Customized Icon

Interactive Button

Multiple Icons with Consistent Styling

Responsive Sizing

Accessibility Example

Custom Styling

Best Practices

Common Patterns

Icon with Text

Loading State

Icon Grid

Next Steps

Animation Variants

Icon Categories

Build docs developers (and LLMs) love

Icon Library

Component API

​Icon Component Props

​Core Props

​Standard SVG Props

​Common SVG Attributes

​SVG Stroke Attributes

​Event Handlers

​Animation-Related Props

​TypeScript Interface

​Usage Examples

​Basic Usage

​Customized Icon

​Interactive Button

​Multiple Icons with Consistent Styling

​Responsive Sizing

​Accessibility Example

​Custom Styling

​Best Practices

​Common Patterns

​Icon with Text

​Loading State

​Icon Grid

​Next Steps

Animation Variants

Icon Categories

Build docs developers (and LLMs) love

Icon Component Props

Core Props

Standard SVG Props

Common SVG Attributes

SVG Stroke Attributes

Event Handlers

Animation-Related Props

TypeScript Interface

Usage Examples

Basic Usage

Customized Icon

Interactive Button

Multiple Icons with Consistent Styling

Responsive Sizing

Accessibility Example

Custom Styling

Best Practices

Common Patterns

Icon with Text

Loading State

Icon Grid

Next Steps