Smooth Animated UI Icons For React & TypeScript – pqoqubbw/icons

pqoqubbw/icons is a collection of over 310+ beautifully crafted and smoothly animated UI icons for React & TypeScript. These icons use Framer Motion for smooth animations and Lucide for consistent SVG shapes. You can obtain them as individual .tsx files or copy the code directly into your project.

The collection includes icons such as home, navigation arrows, editing functions (edit, delete, undo), settings, file management, formatting (bold, italic, underline), symbols, user interaction (upvote, downvote), finance, charting, layout tools, and more specialized icons like a stethoscope and party popper.

How to use it:

1. Visit the pqoqubbw/icons project webpage and locate your desired icon via the search function. Icons included:

• smartphone-charging
• history
• square-activity
• square-arrow-down
• square-arrow-left
• square-arrow-right
• square-arrow-up
• scan-face
• frown
• smile-plus
• smile
• laugh
• annoyed
• meh
• key
• key-square
• key-circle
• rotate-cw
• rotate-ccw
• refresh-cw-off
• refresh-cw
• refresh-ccw-dot
• redo
• undo-dot
• redo-dot
• arrow-big-down
• arrow-big-left
• arrow-big-right
• arrow-big-up
• a-arrow-up
• chart-spline
• arrow-up
• arrow-down
• vibrate
• waves-ladder
• waves
• wind-arrow-down
• air-vent
• tornado
• cloud-rain
• cloud-rain-wind
• arrow-big-down-dash
• arrow-big-left-dash
• arrow-big-right-dash
• arrow-big-up-dash
• moon
• facebook
• twitter
• linkedin
• youtube
• instagram
• twitch
• dribbble
• discord
• search
• cloud-sun
• sunset
• sun-dim
• sun-medium
• sun-moon
• cart
• stethoscope
• circle-check
• earth
• workflow
• logout
• circle-help
• user
• flame
• audio-lines
• eye-off
• square-stack
• badge-alert
• message-circle
• message-circle-more
• message-square
• message-square-more
• message-circle-dashed
• message-square-dashed
• clipboard-check
• home
• arrow-left
• arrow-right
• expand
• route
• airplane
• refresh-ccw
• undo
• download
• square-pen
• delete
• settings
• settings-gear
• calendar-cog
• cursor-click
• menu
• clock
• file-stack
• file-pen-line
• archive
• copy
• attach-file
• alarm-clock
• bold
• italic
• underline
• scan-text
• languages
• at-sign
• bell
• users
• upvote
• downvote
• circle-dollar-sign
• hand-coins
• badge-percent
• chart-pie
• chart-scatter
• gauge
• pen-tool
• fingerprint
• link
• layers
• grip
• git-pull-request
• github
• connect
• volume
• sun
• party-popper
• frame
• bone
• align-center
• align-vertical
• align-horizontal
• compass
• shield-check
• trending-down
• trending-up
• trending-up-down
• timer
• bluetooth-searching
• bluetooth-connected
• bluetooth-off
• flask
• syringe
• play
• pause
• chart-column-decreasing
• chart-column-increasing
• chart-bar-decreasing
• chart-bar-increasing
• chevron-down
• chevron-up
• chevron-left
• chevron-right
• chevrons-up-down
• chevrons-down-up
• chevrons-left-right
• chevrons-right-left
• circle-chevron-down
• circle-chevron-left
• circle-chevron-right
• square-chevron-down
• square-chevron-up
• square-chevron-right
• square-chevron-left
• a-arrow-down
• circle-dashed
• circle-chevron-up
• check
• check-check
• id-card
• loader-pinwheel
• rocking-chair
• banana
• wifi
• chrome
• figma
• fish-symbol
• git-commit-vertical
• git-commit-horizontal
• waypoints
• ship
• roller-coaster
• drum
• train-track
• webhook
• rabbit
• cog
• cpu
• sparkles
• rocket
• activity
• ban
• map-pin
• map-pin-check-inside
• map-pin-minus-inside
• map-pin-plus-inside
• map-pin-off
• map-pin-check
• map-pin-house
• map-pin-minus
• map-pin-plus
• map-pin-x-inside
• battery-full
• terminal
• keyboard
• clap
• layout-panel-top
• book-text
• shower-head
• telescope
• wind
• angry
• cctv
• coffee
• arrow-down-a-z
• arrow-down-z-a
• arrow-down-0-1
• arrow-down-1-0
• x
• cast
• upload
• file-cog
• calendar-days
• chart-line
• file-chart-line
• chart-no-axes-column-increasing
• chart-no-axes-column-decreasing
• radio
• radio-tower
• blocks
• calendar-check
• calendar-check-2
• file-check
• file-check-2
• mail-check
• monitor-check
• laptop-minimal-check
• gallery-horizontal-end
• gallery-vertical-end
• hand-heart
• gallery-thumbnails
• user-check
• user-round-check
• boxes
• and more

2. You then have two options: download the icon as a .tsx file, or copy the .tsx code directly.

Changelog:

04/12/2026

• Added more icons