GradientDeck

  • MCP
  • Blog
  • About
  • Contact
Advertise

GradientDeck

BlogMCPAboutContact
Want to advertise your site here?
Contact me

GradientDeck

Practical CSS generators, palette references, and implementation notes for people shipping interfaces.

CSS generators

  • CSS gradients
  • CSS animations
  • CSS text gradients
  • CSS patterns
  • CSS box shadows
  • Liquid glass CSS

Color tools

  • Color palettes
  • Pick colors from an image
  • Palette visualizer
  • Tailwind colors
  • Mesh gradients
  • CSS blobs

Learn and connect

  • Implementation guides
  • GradientDeck MCP
  • About GradientDeck
  • Contact
  • Privacy policy
Bugs and correctionsAdvertising

© 2024 GradientDeck. All rights reserved.

    Animated SVG Icons

    Use a focused icon animation when a control needs to communicate loading, success, navigation, or a state change. Preview the motion and copy the SVG markup that fits your interface.

    Background GradientsLiquid GlassNEWPattern BackgroundsCSS AnimationsAnimated IconsMCP for AgentsNEW
    Color PalettesPalette VisualizerBlob GeneratorMeshColor Image PickerText GradientsBox ShadowColors

    Animated Icons

    Browse animated SVG icons, search by name, and download the code for your interface. Built with Motion and Lucide.

    Search for 'Arrow'
    1
    Calendar1
    Paperclip
    ToggleLeft
    Clapperboard
    BatteryFull
    Grape
    AArrowDown
    Activity
    ALargeSmall
    AArrowUp
    AirVent
    Airplay
    AlarmClock
    AlarmClockCheck
    Clock8
    AlarmSmoke
    Album
    AlignCenter
    AlignCenterHorizontal
    AlignCenterVertical
    Anchor
    Annoyed
    Aperture
    Angry
    AtSign
    AudioWaveform
    AudioLines
    BadgeAlert
    BadgeDollarSign
    BadgeCheck
    Atom
    BellRing
    Bike
    Blocks
    Bomb
    Blend
    Bold
    Bug
    BringToFront
    Cable
    ChartColumn
    ChartPie
    ChartColumnBig
    ChartGantt
    ChartLine
    ChartNoAxes
    Check
    ChevronsLeft
    ChevronsRight
    ChevronLeft
    ChevronRight
    ChevronUp
    ChevronDown
    ChevronsDown
    ChevronsUp
    CheckCheck
    ChevronsUpDown
    Chrome
    Braces
    Brackets
    Box
    ChevronFirst
    ChevronLast
    CircleDashed
    CircleDotDashed
    CircleFadingArrowUp
    CircleHelp
    CircleChevronDown
    CircleChevronLeft
    CircleChevronRight
    CircleChevronUp
    Rocket
    ClipboardCopy
    Crop
    Earth
    Download
    CloudDrizzle
    CloudDownload
    Code
    Codesandbox
    Dice6
    Disc3
    Flame
    User
    Expand
    Delete
    Copy
    ScanText
    Fan
    FileChartColumn
    FileChartPie
    FlameKindling
    Grip
    HardDriveDownload
    IterationCcw
    IterationCw
    LoaderPinwheel
    Bolt
    Group
    HeartHandshake
    LayoutGrid
    Link2
    Maximize2
    Nfc
    Users
    BluetoothSearching
    Cpu
    Plane
    Origami
    Network
    PartyPopper
    Podcast
    ScanHeart
    Slack
    SlidersVertical
    Martini
    Magnet
    Trees
    Wifi
    Wine
    Waves
    ThumbsUp
    ThumbsDown
    Squirrel
    TestTubes
    WandSparkles
    SprayCan
    SmartphoneNfc
    FileStack
    Archive
    Undo
    AppWindowMac
    Antenna
    Cast
    Salad
    Music
    Ungroup
    Sparkles
    Shell
    Globe
    Compass
    Percent
    Linkedin
    Cake
    ThermometerSnowflake
    Wind
    Folders
    PackageOpen
    Boxes
    BookMarked
    Wand
    Heater
    SwatchBook
    Layers
    Animated icon guide

    Give an icon one job

    Icon motion works best when it reinforces meaning. This collection is for small, purposeful transitions that support a control instead of competing with it.

    Related reading
    CSS animation generator

    Tune a custom keyframe when the collection is not enough.

    GradientDeck guides

    Read the implementation notes before shipping the motion.

    01

    Match motion to state

    A spinner, checkmark, arrow, and menu icon each have a different communication job.

    • Use loading motion while work is in progress.
    • Use a success transition after a confirmed action.
    • Use navigation motion to show direction or hierarchy.
    02

    Keep the icon readable

    The silhouette and label should still make sense before and after the animation.

    • Do not rely on movement as the only status signal.
    • Keep the path and stroke weight consistent with the icon set.
    • Test the animation beside the real button or control.
    03

    Respect reduced motion

    A decorative transition can be removed; the meaning of the control cannot.

    • Provide a reduced-motion rule in the consuming UI.
    • Preserve visible focus and pressed states.
    • Use text or status messaging for important outcomes.
    Questions
    Can I use these icons without animation?

    Yes. The static icon should remain understandable, and removing motion is often the right choice for reduced-motion preferences.

    Where should an animated icon appear?

    Use it close to the state or action it explains, such as inside a button, status message, or navigation control.