Internal design system

Animated icon kit

One Lucide look, light Motion on hover — same family on every BraddCorp site. MIT. No credit link required.

Hover any icon below. Copy from components/icons/ into a client repo with motion installed.

Where they land

Roll this kit into each working tree so admin, reg, auth, and marketing chrome share the same motion language.

  • braddcorp.com

    Source of truth + gallery (/icons)

  • LECYC

    Marketing + reg + staff admin

  • Rendezvous IL

    Retreat site + reg + check-in + apps

  • Maddy’s Foundation

    Site + team event registration

  • Arnold Church of Christ

    Church site chrome

  • Exhibit Evangelism

    Fair outreach + booth tools

  • Church Relay

    Product UI + sales

  • Pew Packers

    Games + coach home

  • Camp Ruby demo

    Reg kit showcase

Surfaces

Filter the gallery by product surface — not by random style packs.

  • Nav & chrome

    Headers, menus, theme toggles, home — every public and staff shell.

  • Staff admin

    LECYC / Ren / Maddys / Camp Ruby dash — rows, filters, exports, settings.

  • Registration

    Household flows, campers, payments, check-in, express re-register.

  • Auth & security

    Clerk kit — lock, eye toggles, keys, logout, shield confirmations.

  • Content & files

    Docs, folders, uploads, copy links, edit forms, messages.

  • Feedback

    Success checks, delete confirms, refresh, activity pulses.

  • Marketing delight

    Light motion on CTAs, feature rows, and empty states — not hero Lottie.

Gallery

Hover to preview the motion.

See live sites →
  • Home

    Logo-adjacent home / dashboard

    All site headers & admin shells

    import { HomeIcon } from "@/components/icons"

  • Menu

    Hamburger open/close

    Mobile nav on every marketing + reg site

    import { MenuIcon } from "@/components/icons"

  • Search

    Find camper / household / order

    Admin tables, check-in, directories

    import { SearchIcon } from "@/components/icons"

  • Bell

    Notifications

    Staff alerts, unread notices

    import { BellIcon } from "@/components/icons"

  • Settings

    Gear / site config

    Admin prefs, Cards/Rows toggles

    import { SettingsIcon } from "@/components/icons"

  • Sun

    Light mode

    Theme toggle (light)

    import { SunIcon } from "@/components/icons"

  • Moon

    Dark mode

    Theme toggle (dark)

    import { MoonIcon } from "@/components/icons"

  • User

    Single account

    Account menu, parent profile

    import { UserIcon } from "@/components/icons"

  • Users

    Groups / family

    Households, staff roster, volunteers

    import { UsersIcon } from "@/components/icons"

  • ID card

    Attendee identity

    Camper profiles, check-in badges

    import { IdCardIcon } from "@/components/icons"

  • Calendar

    Dates & weeks

    Sessions, event dates, schedules

    import { CalendarDaysIcon } from "@/components/icons"

  • Map pin

    Place

    Camp location, lodging, venue

    import { MapPinIcon } from "@/components/icons"

  • Cart

    Checkout

    Reg checkout, add-ons, merch

    import { CartIcon } from "@/components/icons"

  • Credit card

    Pay / refund

    Payments, Stripe, balances

    import { CreditCardIcon } from "@/components/icons"

  • Clipboard check

    Complete checklist

    Check-in, medical clearance, forms done

    import { ClipboardCheckIcon } from "@/components/icons"

  • Plus

    Create

    Add camper, new row, create

    import { PlusIcon } from "@/components/icons"

  • Edit

    Edit

    Edit registration, inline row edit

    import { SquarePenIcon } from "@/components/icons"

  • Delete

    Destructive action

    Remove row, trash confirm

    import { DeleteIcon } from "@/components/icons"

  • Copy

    Clipboard copy

    Copy invite link, IDs, emails

    import { CopyIcon } from "@/components/icons"

  • Download

    Export

    CSV export, badges, reports

    import { DownloadIcon } from "@/components/icons"

  • Upload

    Import file

    Photo upload, medical docs

    import { UploadIcon } from "@/components/icons"

  • Folder

    Open folder

    File drawers, media libraries

    import { FolderOpenIcon } from "@/components/icons"

  • File

    Document

    Waivers, briefs, PDF views

    import { FileTextIcon } from "@/components/icons"

  • Mail check

    Email delivered

    Confirmations sent, inbox status

    import { MailCheckIcon } from "@/components/icons"

  • Send

    Submit / share

    Send email, share invite, contact forms

    import { SendIcon } from "@/components/icons"

  • Message

    Conversation

    Chat, support, year directory messaging

    import { MessageCircleIcon } from "@/components/icons"

  • Lock

    Secure

    Sign-in, protected routes

    import { LockIcon } from "@/components/icons"

  • Key

    Credentials

    Password / API keys / invite codes

    import { KeyIcon } from "@/components/icons"

  • Eye

    Visible

    Show password, reveal PII

    import { EyeIcon } from "@/components/icons"

  • Eye off

    Hidden

    Hide password

    import { EyeOffIcon } from "@/components/icons"

  • Shield check

    Verified

    Verified staff, medical OK, Turnstile success

    import { ShieldCheckIcon } from "@/components/icons"

  • Log out

    Sign out

    Account menu sign-out

    import { LogoutIcon } from "@/components/icons"

  • Check

    Done

    Inline success, step complete

    import { CheckIcon } from "@/components/icons"

  • Circle check

    Confirmed

    Success screens, feature bullets

    import { CircleCheckIcon } from "@/components/icons"

  • Refresh

    Reload

    Reload table, sync payments

    import { RefreshCWIcon } from "@/components/icons"

  • Activity

    Pulse / live

    Live status, overview sparkline cue

    import { ActivityIcon } from "@/components/icons"

  • Chart

    Metrics

    Admin overview stats, sales pages

    import { ChartLineIcon } from "@/components/icons"

  • Arrow right

    Continue

    CTAs, next step, case-study links

    import { ArrowRightIcon } from "@/components/icons"

  • External link

    Opens elsewhere

    Open live site, Stripe dashboard

    import { ExternalLinkIcon } from "@/components/icons"

  • Bookmark

    Save

    Saved views, favorites

    import { BookmarkIcon } from "@/components/icons"

  • Heart

    Care / love

    Donate, favorited, thank-you states

    import { HeartIcon } from "@/components/icons"

  • Sparkles

    Highlight

    New features, empty-state delight

    import { SparklesIcon } from "@/components/icons"

  • Zap

    Quick action

    Express re-register, fast path CTAs

    import { ZapIcon } from "@/components/icons"

Use on a client site

  1. pnpm add motion (or npm) in the target repo.
  2. Copy components/icons/ (and optionally lib/icon-kit.ts) from this site.
  3. Import from @/components/icons — replace static lucide-react usages where hover delight helps (nav, admin actions, success/delete).

Need another glyph? Add from lucide-animated.com with the shadcn registry URL, then move the file into components/icons/ and register it in the catalog.