Display

Icon

Adaptive SVG icons powered by Lucide with native-feeling interaction physics.

Icon Explorer

A complete, searchable library of icons.

Icon Library

Explore premium Lucide icons.

Global Size

Global Stroke

Global Color

AArrowDown

AArrowDownIcon

AArrowUp

AArrowUpIcon

ALargeSmall

ALargeSmallIcon

Accessibility

AccessibilityIcon

Activity

ActivityIcon

ActivitySquare

ActivitySquareIcon

AirVent

AirVentIcon

Airplay

AirplayIcon

AlarmCheck

AlarmCheckIcon

AlarmClock

AlarmClockCheck

AlarmClockCheckIcon

AlarmClockIcon

AlarmClockMinus

AlarmClockMinusIcon

AlarmClockOff

AlarmClockOffIcon

AlarmClockPlus

AlarmClockPlusIcon

AlarmMinus

AlarmMinusIcon

AlarmPlus

AlarmPlusIcon

AlarmSmoke

AlarmSmokeIcon

Album

AlbumIcon

AlertCircle

AlertCircleIcon

AlertOctagon

AlertOctagonIcon

AlertTriangle

AlertTriangleIcon

AlignCenter

AlignCenterHorizontal

AlignCenterHorizontalIcon

AlignCenterIcon

AlignCenterVertical

AlignCenterVerticalIcon

AlignEndHorizontal

AlignEndHorizontalIcon

AlignEndVertical

AlignEndVerticalIcon

AlignHorizontalDistributeCenter

AlignHorizontalDistributeCenterIcon

AlignHorizontalDistributeEnd

AlignHorizontalDistributeEndIcon

AlignHorizontalDistributeStart

AlignHorizontalDistributeStartIcon

AlignHorizontalJustifyCenter

AlignHorizontalJustifyCenterIcon

AlignHorizontalJustifyEnd

AlignHorizontalJustifyEndIcon

AlignHorizontalJustifyStart

AlignHorizontalJustifyStartIcon

AlignHorizontalSpaceAround

AlignHorizontalSpaceAroundIcon

AlignHorizontalSpaceBetween

AlignHorizontalSpaceBetweenIcon

AlignJustify

AlignJustifyIcon

AlignLeft

AlignLeftIcon

AlignRight

AlignRightIcon

AlignStartHorizontal

AlignStartHorizontalIcon

AlignStartVertical

AlignStartVerticalIcon

AlignVerticalDistributeCenter

AlignVerticalDistributeCenterIcon

'use client'

import React from 'react'
import { Icon } from 'biibaos'
import { Zap } from 'lucide-react'

export default function App() {
  return <Icon icon={Zap} size={24} color="var(--biiba-primary)" />
}

Component Usage

Icons support standard Lucide props with added physics.

'use client'

import React from 'react'
import { Icon, Stack } from 'biibaos'
import { Zap, Bell, Settings } from 'lucide-react'

export default function App() {
  return (
    <Stack gap={20} align="center">
      <Icon icon={Zap} color="var(--biiba-primary)" size={24} />
      <Icon icon={Bell} color="var(--biiba-warning)" />
      <Icon icon={Settings} strokeWidth={1} size={32} />
    </Stack>
  )
}

Motion & Animations

BiibaOS Icons feature built-in animation presets.

Pulse

Spin

Bounce

Shake

Float

Interactive Hover Effects

Hover over the icons to see custom Framer Motion properties applied.

Scale Up

Rotate

Wiggle

Jump

Color Shift

'use client'

import React from 'react'
import { Icon, Grid } from 'biibaos'
import { Zap, Settings, ArrowUp } from 'lucide-react'

export default function App() {
  return (
    <Grid columns={3} gap={16}>
      <Icon icon={Zap} animation="pulse" />
      <Icon icon={Settings} animation="spin" />
      <Icon icon={ArrowUp} animation="bounce" />
    </Grid>
  )
}

Properties

Prop	Type	Default	Description
`icon`	`any`	—	The Lucide icon component to render
`size`	`number \| string`	20	Size in pixels
`color`	`string`	'currentColor'	Stroke color
`fill`	`string`	'none'	Fill color
`strokeWidth`	`number`	2	Stroke width - defaults to 2 for a clean, professional look
`adaptive`	`boolean`	true	Whether to add adaptive platform behavior (haptics on mobile, hover scaling on desktop)
`animation`	`'pulse' \| 'spin' \| 'bounce' \| 'shake' \| 'float'`	—	Animation preset - pulse: scaling up and down - spin: 360deg rotation - bounce: vertical movement - shake: horizontal rapid movement - float: gentle floating movement
`delay`	`number`	0	Delay before animation starts (seconds)

QR Code

Avatar