Repository: pqoqubbw/icons Branch: main Commit: 1854968a5faa Files: 869 Total size: 3.2 MB Directory structure: gitextract_z19nbr_4/ ├── .github/ │ ├── pull_request_template.md │ └── workflows/ │ └── ci.yml ├── .gitignore ├── .vscode/ │ └── settings.json ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── actions/ │ ├── get-icon-content.ts │ ├── get-icons.ts │ └── open-in-v0.ts ├── app/ │ ├── globals.css │ ├── icon.tsx │ ├── icons/ │ │ └── [slug]/ │ │ ├── icon-card.tsx │ │ ├── page.tsx │ │ └── similar-icons.tsx │ ├── layout.tsx │ ├── llms.txt/ │ │ └── route.ts │ ├── page.tsx │ ├── robots.ts │ ├── sitemap.ts │ └── sponsorship/ │ └── page.tsx ├── biome.jsonc ├── components/ │ ├── analytics.tsx │ ├── card.tsx │ ├── cli-block.tsx │ ├── comment.client.tsx │ ├── comment.tsx │ ├── footer.tsx │ ├── github-button.tsx │ ├── header.tsx │ ├── list.tsx │ ├── search-input.tsx │ ├── sponsorship/ │ │ ├── amount-selector.tsx │ │ └── stamp.tsx │ └── ui/ │ ├── avatar.tsx │ ├── icon-state.tsx │ ├── input.tsx │ ├── portal.tsx │ ├── radio.tsx │ ├── scroll-area.tsx │ ├── tabs.tsx │ ├── text-loop.tsx │ ├── theme-toggle.tsx │ └── tooltip.tsx ├── constants.ts ├── fonts/ │ └── README.md ├── helpers/ │ └── get-icon-for-v0.ts ├── hooks/ │ └── use-touch-device.ts ├── icons/ │ ├── a-arrow-down.tsx │ ├── a-arrow-up.tsx │ ├── accessibility.tsx │ ├── activity.tsx │ ├── air-vent.tsx │ ├── airplane.tsx │ ├── airplay.tsx │ ├── alarm-clock.tsx │ ├── align-center.tsx │ ├── align-horizontal.tsx │ ├── align-left.tsx │ ├── align-right.tsx │ ├── align-vertical.tsx │ ├── ambulance.tsx │ ├── angry.tsx │ ├── annoyed.tsx │ ├── archive.tsx │ ├── arrow-big-down-dash.tsx │ ├── arrow-big-down.tsx │ ├── arrow-big-left-dash.tsx │ ├── arrow-big-left.tsx │ ├── arrow-big-right-dash.tsx │ ├── arrow-big-right.tsx │ ├── arrow-big-up-dash.tsx │ ├── arrow-big-up.tsx │ ├── arrow-down-0-1.tsx │ ├── arrow-down-1-0.tsx │ ├── arrow-down-a-z.tsx │ ├── arrow-down-left.tsx │ ├── arrow-down-right.tsx │ ├── arrow-down-z-a.tsx │ ├── arrow-down.tsx │ ├── arrow-left.tsx │ ├── arrow-right.tsx │ ├── arrow-up-left.tsx │ ├── arrow-up-right.tsx │ ├── arrow-up.tsx │ ├── at-sign.tsx │ ├── atom.tsx │ ├── attach-file.tsx │ ├── audio-lines.tsx │ ├── axe.tsx │ ├── badge-alert.tsx │ ├── badge-percent.tsx │ ├── ban.tsx │ ├── banana.tsx │ ├── battery-charging.tsx │ ├── battery-full.tsx │ ├── battery-low.tsx │ ├── battery-medium.tsx │ ├── battery-plus.tsx │ ├── battery-warning.tsx │ ├── battery.tsx │ ├── bell-electric.tsx │ ├── bell.tsx │ ├── blocks.tsx │ ├── bluetooth-connected.tsx │ ├── bluetooth-off.tsx │ ├── bluetooth-searching.tsx │ ├── bluetooth.tsx │ ├── bold.tsx │ ├── bone.tsx │ ├── book-text.tsx │ ├── bookmark-check.tsx │ ├── bookmark-minus.tsx │ ├── bookmark-plus.tsx │ ├── bookmark-x.tsx │ ├── bookmark.tsx │ ├── bot-message-square.tsx │ ├── bot.tsx │ ├── box.tsx │ ├── boxes.tsx │ ├── brain.tsx │ ├── calendar-check-2.tsx │ ├── calendar-check.tsx │ ├── calendar-cog.tsx │ ├── calendar-days.tsx │ ├── cart.tsx │ ├── cast.tsx │ ├── cctv.tsx │ ├── chart-bar-decreasing.tsx │ ├── chart-bar-increasing.tsx │ ├── chart-column-decreasing.tsx │ ├── chart-column-increasing.tsx │ ├── chart-line.tsx │ ├── chart-no-axes-column-decreasing.tsx │ ├── chart-no-axes-column-increasing.tsx │ ├── chart-pie.tsx │ ├── chart-scatter.tsx │ ├── chart-spline.tsx │ ├── check-check.tsx │ ├── check.tsx │ ├── chess-bishop.tsx │ ├── chess-king.tsx │ ├── chess-knight.tsx │ ├── chess-pawn.tsx │ ├── chevron-down.tsx │ ├── chevron-first.tsx │ ├── chevron-left.tsx │ ├── chevron-right.tsx │ ├── chevron-up.tsx │ ├── chevrons-down-up.tsx │ ├── chevrons-left-right.tsx │ ├── chevrons-right-left.tsx │ ├── chevrons-up-down.tsx │ ├── chrome.tsx │ ├── circle-check.tsx │ ├── circle-chevron-down.tsx │ ├── circle-chevron-left.tsx │ ├── circle-chevron-right.tsx │ ├── circle-chevron-up.tsx │ ├── circle-dashed.tsx │ ├── circle-dollar-sign.tsx │ ├── circle-help.tsx │ ├── clap.tsx │ ├── clipboard-check.tsx │ ├── clock.tsx │ ├── cloud-cog.tsx │ ├── cloud-download.tsx │ ├── cloud-lightning.tsx │ ├── cloud-rain-wind.tsx │ ├── cloud-rain.tsx │ ├── cloud-snow.tsx │ ├── cloud-sun.tsx │ ├── cloud-upload.tsx │ ├── coffee.tsx │ ├── cog.tsx │ ├── compass.tsx │ ├── connect.tsx │ ├── construction.tsx │ ├── contrast.tsx │ ├── cooking-pot.tsx │ ├── copy.tsx │ ├── corner-down-left.tsx │ ├── corner-down-right.tsx │ ├── corner-left-down.tsx │ ├── corner-left-up.tsx │ ├── corner-right-down.tsx │ ├── corner-right-up.tsx │ ├── corner-up-left.tsx │ ├── corner-up-right.tsx │ ├── cpu.tsx │ ├── cup-soda.tsx │ ├── cursor-click.tsx │ ├── database-backup.tsx │ ├── delete.tsx │ ├── disc-3.tsx │ ├── discord.tsx │ ├── dollar-sign.tsx │ ├── download.tsx │ ├── downvote.tsx │ ├── dribbble.tsx │ ├── droplet.tsx │ ├── drum.tsx │ ├── earth.tsx │ ├── euro.tsx │ ├── ev-charger.tsx │ ├── expand.tsx │ ├── eye-off.tsx │ ├── eye.tsx │ ├── facebook.tsx │ ├── feather.tsx │ ├── figma.tsx │ ├── file-chart-line.tsx │ ├── file-check-2.tsx │ ├── file-check.tsx │ ├── file-cog.tsx │ ├── file-pen-line.tsx │ ├── file-stack.tsx │ ├── file-text.tsx │ ├── fingerprint.tsx │ ├── fish-symbol.tsx │ ├── flame.tsx │ ├── flask.tsx │ ├── folder-archive.tsx │ ├── folder-check.tsx │ ├── folder-clock.tsx │ ├── folder-code.tsx │ ├── folder-cog.tsx │ ├── folder-dot.tsx │ ├── folder-down.tsx │ ├── folder-git-2.tsx │ ├── folder-git.tsx │ ├── folder-heart.tsx │ ├── folder-input.tsx │ ├── folder-kanban.tsx │ ├── folder-key.tsx │ ├── folder-lock.tsx │ ├── folder-minus.tsx │ ├── folder-open.tsx │ ├── folder-output.tsx │ ├── folder-plus.tsx │ ├── folder-root.tsx │ ├── folder-sync.tsx │ ├── folder-tree.tsx │ ├── folder-up.tsx │ ├── folder-x.tsx │ ├── folders.tsx │ ├── frame.tsx │ ├── frown.tsx │ ├── gallery-horizontal-end.tsx │ ├── gallery-thumbnails.tsx │ ├── gallery-vertical-end.tsx │ ├── gauge.tsx │ ├── gavel.tsx │ ├── georgian-lari.tsx │ ├── git-branch.tsx │ ├── git-commit-horizontal.tsx │ ├── git-commit-vertical.tsx │ ├── git-compare-arrows.tsx │ ├── git-compare.tsx │ ├── git-fork.tsx │ ├── git-graph.tsx │ ├── git-merge.tsx │ ├── git-pull-request-closed.tsx │ ├── git-pull-request-create.tsx │ ├── git-pull-request.tsx │ ├── github.tsx │ ├── gitlab.tsx │ ├── graduation-cap.tsx │ ├── grip-horizontal.tsx │ ├── grip-vertical.tsx │ ├── grip.tsx │ ├── hammer.tsx │ ├── hand-coins.tsx │ ├── hand-fist.tsx │ ├── hand-grab.tsx │ ├── hand-heart.tsx │ ├── hand-helping.tsx │ ├── hand-metal.tsx │ ├── hand.tsx │ ├── hard-drive-download.tsx │ ├── hard-drive-upload.tsx │ ├── heart-handshake.tsx │ ├── heart-pulse.tsx │ ├── heart.tsx │ ├── history.tsx │ ├── home.tsx │ ├── hourglass.tsx │ ├── id-card.tsx │ ├── index.ts │ ├── indian-rupee.tsx │ ├── instagram.tsx │ ├── italic.tsx │ ├── japanese-yen.tsx │ ├── key-circle.tsx │ ├── key-square.tsx │ ├── key.tsx │ ├── keyboard.tsx │ ├── languages.tsx │ ├── laptop-minimal-check.tsx │ ├── laugh.tsx │ ├── layers.tsx │ ├── layout-panel-top.tsx │ ├── link.tsx │ ├── linkedin.tsx │ ├── loader-pinwheel.tsx │ ├── lock-keyhole-open.tsx │ ├── lock-keyhole.tsx │ ├── lock-open.tsx │ ├── lock.tsx │ ├── logout.tsx │ ├── mail-check.tsx │ ├── mailbox.tsx │ ├── map-pin-check-inside.tsx │ ├── map-pin-check.tsx │ ├── map-pin-house.tsx │ ├── map-pin-minus-inside.tsx │ ├── map-pin-minus.tsx │ ├── map-pin-off.tsx │ ├── map-pin-plus-inside.tsx │ ├── map-pin-plus.tsx │ ├── map-pin-x-inside.tsx │ ├── map-pin.tsx │ ├── maximize-2.tsx │ ├── maximize.tsx │ ├── meh.tsx │ ├── menu.tsx │ ├── message-circle-check.tsx │ ├── message-circle-dashed.tsx │ ├── message-circle-more.tsx │ ├── message-circle-plus.tsx │ ├── message-circle-x.tsx │ ├── message-circle.tsx │ ├── message-square-check.tsx │ ├── message-square-dashed.tsx │ ├── message-square-more.tsx │ ├── message-square-plus.tsx │ ├── message-square-x.tsx │ ├── message-square.tsx │ ├── mic-off.tsx │ ├── mic.tsx │ ├── minimize.tsx │ ├── monitor-check.tsx │ ├── moon.tsx │ ├── nfc.tsx │ ├── panel-left-close.tsx │ ├── panel-left-open.tsx │ ├── panel-right-open.tsx │ ├── party-popper.tsx │ ├── pause.tsx │ ├── pen-tool.tsx │ ├── philippine-peso.tsx │ ├── pickaxe.tsx │ ├── play.tsx │ ├── plug-zap.tsx │ ├── plus.tsx │ ├── pound-sterling.tsx │ ├── rabbit.tsx │ ├── radio-tower.tsx │ ├── radio.tsx │ ├── redo-dot.tsx │ ├── redo.tsx │ ├── refresh-ccw-dot.tsx │ ├── refresh-ccw.tsx │ ├── refresh-cw-off.tsx │ ├── refresh-cw.tsx │ ├── rocket.tsx │ ├── rocking-chair.tsx │ ├── roller-coaster.tsx │ ├── rotate-ccw.tsx │ ├── rotate-cw.tsx │ ├── route.tsx │ ├── russian-ruble.tsx │ ├── saudi-riyal.tsx │ ├── scan-face.tsx │ ├── scan-text.tsx │ ├── search.tsx │ ├── send.tsx │ ├── settings.tsx │ ├── shield-check.tsx │ ├── ship.tsx │ ├── shower-head.tsx │ ├── shrink.tsx │ ├── sliders-horizontal.tsx │ ├── smartphone-charging.tsx │ ├── smartphone-nfc.tsx │ ├── smile-plus.tsx │ ├── smile.tsx │ ├── snowflake.tsx │ ├── sparkles.tsx │ ├── square-activity.tsx │ ├── square-arrow-down.tsx │ ├── square-arrow-left.tsx │ ├── square-arrow-right.tsx │ ├── square-arrow-up.tsx │ ├── square-chevron-down.tsx │ ├── square-chevron-left.tsx │ ├── square-chevron-right.tsx │ ├── square-chevron-up.tsx │ ├── square-pen.tsx │ ├── square-stack.tsx │ ├── stethoscope.tsx │ ├── sun-dim.tsx │ ├── sun-medium.tsx │ ├── sun-moon.tsx │ ├── sun.tsx │ ├── sunset.tsx │ ├── swiss-franc.tsx │ ├── syringe.tsx │ ├── telescope.tsx │ ├── terminal.tsx │ ├── thermometer.tsx │ ├── timer.tsx │ ├── tornado.tsx │ ├── train-track.tsx │ ├── trending-down.tsx │ ├── trending-up-down.tsx │ ├── trending-up.tsx │ ├── truck.tsx │ ├── turkish-lira.tsx │ ├── twitch.tsx │ ├── twitter.tsx │ ├── underline.tsx │ ├── undo-dot.tsx │ ├── undo.tsx │ ├── upload.tsx │ ├── upvote.tsx │ ├── user-check.tsx │ ├── user-round-check.tsx │ ├── user-round-plus.tsx │ ├── user.tsx │ ├── users.tsx │ ├── vibrate.tsx │ ├── volume.tsx │ ├── washing-machine.tsx │ ├── waves-ladder.tsx │ ├── waves.tsx │ ├── waypoints.tsx │ ├── webhook.tsx │ ├── wifi-low.tsx │ ├── wifi.tsx │ ├── wind-arrow-down.tsx │ ├── wind.tsx │ ├── workflow.tsx │ ├── wrench.tsx │ ├── x.tsx │ ├── youtube.tsx │ ├── zap-off.tsx │ └── zap.tsx ├── lib/ │ ├── get-package-manager-prefix.ts │ ├── kebab-to-pascal.ts │ └── utils.ts ├── next.config.ts ├── package.json ├── postcss.config.mjs ├── providers/ │ ├── package-name.tsx │ └── theme.tsx ├── public/ │ └── r/ │ ├── a-arrow-down.json │ ├── a-arrow-up.json │ ├── accessibility.json │ ├── activity.json │ ├── air-vent.json │ ├── airplane.json │ ├── airplay.json │ ├── alarm-clock.json │ ├── align-center.json │ ├── align-horizontal.json │ ├── align-left.json │ ├── align-right.json │ ├── align-vertical.json │ ├── ambulance.json │ ├── angry.json │ ├── annoyed.json │ ├── archive.json │ ├── arrow-big-down-dash.json │ ├── arrow-big-down.json │ ├── arrow-big-left-dash.json │ ├── arrow-big-left.json │ ├── arrow-big-right-dash.json │ ├── arrow-big-right.json │ ├── arrow-big-up-dash.json │ ├── arrow-big-up.json │ ├── arrow-down-0-1.json │ ├── arrow-down-1-0.json │ ├── arrow-down-a-z.json │ ├── arrow-down-left.json │ ├── arrow-down-right.json │ ├── arrow-down-z-a.json │ ├── arrow-down.json │ ├── arrow-left.json │ ├── arrow-right.json │ ├── arrow-up-left.json │ ├── arrow-up-right.json │ ├── arrow-up.json │ ├── at-sign.json │ ├── atom.json │ ├── attach-file.json │ ├── audio-lines.json │ ├── axe.json │ ├── badge-alert.json │ ├── badge-percent.json │ ├── ban.json │ ├── banana.json │ ├── battery-charging.json │ ├── battery-full.json │ ├── battery-low.json │ ├── battery-medium.json │ ├── battery-plus.json │ ├── battery-warning.json │ ├── battery.json │ ├── bell-electric.json │ ├── bell.json │ ├── blocks.json │ ├── bluetooth-connected.json │ ├── bluetooth-off.json │ ├── bluetooth-searching.json │ ├── bluetooth.json │ ├── bold.json │ ├── bone.json │ ├── book-text.json │ ├── bookmark-check.json │ ├── bookmark-minus.json │ ├── bookmark-plus.json │ ├── bookmark-x.json │ ├── bookmark.json │ ├── bot-message-square.json │ ├── bot.json │ ├── box.json │ ├── boxes.json │ ├── brain.json │ ├── calendar-check-2.json │ ├── calendar-check.json │ ├── calendar-cog.json │ ├── calendar-days.json │ ├── cart.json │ ├── cast.json │ ├── cctv.json │ ├── chart-bar-decreasing.json │ ├── chart-bar-increasing.json │ ├── chart-column-decreasing.json │ ├── chart-column-increasing.json │ ├── chart-line.json │ ├── chart-no-axes-column-decreasing.json │ ├── chart-no-axes-column-increasing.json │ ├── chart-pie.json │ ├── chart-scatter.json │ ├── chart-spline.json │ ├── check-check.json │ ├── check.json │ ├── chess-bishop.json │ ├── chess-king.json │ ├── chess-knight.json │ ├── chess-pawn.json │ ├── chevron-down.json │ ├── chevron-first.json │ ├── chevron-left.json │ ├── chevron-right.json │ ├── chevron-up.json │ ├── chevrons-down-up.json │ ├── chevrons-left-right.json │ ├── chevrons-right-left.json │ ├── chevrons-up-down.json │ ├── chrome.json │ ├── circle-check.json │ ├── circle-chevron-down.json │ ├── circle-chevron-left.json │ ├── circle-chevron-right.json │ ├── circle-chevron-up.json │ ├── circle-dashed.json │ ├── circle-dollar-sign.json │ ├── circle-help.json │ ├── clap.json │ ├── clipboard-check.json │ ├── clock.json │ ├── cloud-cog.json │ ├── cloud-download.json │ ├── cloud-lightning.json │ ├── cloud-rain-wind.json │ ├── cloud-rain.json │ ├── cloud-snow.json │ ├── cloud-sun.json │ ├── cloud-upload.json │ ├── coffee.json │ ├── cog.json │ ├── compass.json │ ├── connect.json │ ├── construction.json │ ├── contrast.json │ ├── cooking-pot.json │ ├── copy.json │ ├── corner-down-left.json │ ├── corner-down-right.json │ ├── corner-left-down.json │ ├── corner-left-up.json │ ├── corner-right-down.json │ ├── corner-right-up.json │ ├── corner-up-left.json │ ├── corner-up-right.json │ ├── cpu.json │ ├── cup-soda.json │ ├── cursor-click.json │ ├── database-backup.json │ ├── delete.json │ ├── disc-3.json │ ├── discord.json │ ├── dollar-sign.json │ ├── download.json │ ├── downvote.json │ ├── dribbble.json │ ├── droplet.json │ ├── drum.json │ ├── earth.json │ ├── euro.json │ ├── ev-charger.json │ ├── expand.json │ ├── eye-off.json │ ├── eye.json │ ├── facebook.json │ ├── feather.json │ ├── figma.json │ ├── file-chart-line.json │ ├── file-check-2.json │ ├── file-check.json │ ├── file-cog.json │ ├── file-pen-line.json │ ├── file-stack.json │ ├── file-text.json │ ├── fingerprint.json │ ├── fish-symbol.json │ ├── flame.json │ ├── flask.json │ ├── folder-archive.json │ ├── folder-check.json │ ├── folder-clock.json │ ├── folder-code.json │ ├── folder-cog.json │ ├── folder-dot.json │ ├── folder-down.json │ ├── folder-git-2.json │ ├── folder-git.json │ ├── folder-heart.json │ ├── folder-input.json │ ├── folder-kanban.json │ ├── folder-key.json │ ├── folder-lock.json │ ├── folder-minus.json │ ├── folder-open.json │ ├── folder-output.json │ ├── folder-plus.json │ ├── folder-root.json │ ├── folder-sync.json │ ├── folder-tree.json │ ├── folder-up.json │ ├── folder-x.json │ ├── folders.json │ ├── frame.json │ ├── frown.json │ ├── gallery-horizontal-end.json │ ├── gallery-thumbnails.json │ ├── gallery-vertical-end.json │ ├── gauge.json │ ├── gavel.json │ ├── georgian-lari.json │ ├── git-branch.json │ ├── git-commit-horizontal.json │ ├── git-commit-vertical.json │ ├── git-compare-arrows.json │ ├── git-compare.json │ ├── git-fork.json │ ├── git-graph.json │ ├── git-merge.json │ ├── git-pull-request-closed.json │ ├── git-pull-request-create.json │ ├── git-pull-request.json │ ├── github.json │ ├── gitlab.json │ ├── graduation-cap.json │ ├── grip-horizontal.json │ ├── grip-vertical.json │ ├── grip.json │ ├── hammer.json │ ├── hand-coins.json │ ├── hand-fist.json │ ├── hand-grab.json │ ├── hand-heart.json │ ├── hand-helping.json │ ├── hand-metal.json │ ├── hand.json │ ├── hard-drive-download.json │ ├── hard-drive-upload.json │ ├── heart-handshake.json │ ├── heart-pulse.json │ ├── heart.json │ ├── history.json │ ├── home.json │ ├── hourglass.json │ ├── id-card.json │ ├── indian-rupee.json │ ├── instagram.json │ ├── italic.json │ ├── japanese-yen.json │ ├── key-circle.json │ ├── key-square.json │ ├── key.json │ ├── keyboard.json │ ├── languages.json │ ├── laptop-minimal-check.json │ ├── laugh.json │ ├── layers.json │ ├── layout-panel-top.json │ ├── link.json │ ├── linkedin.json │ ├── loader-pinwheel.json │ ├── lock-keyhole-open.json │ ├── lock-keyhole.json │ ├── lock-open.json │ ├── lock.json │ ├── logout.json │ ├── mail-check.json │ ├── mailbox.json │ ├── map-pin-check-inside.json │ ├── map-pin-check.json │ ├── map-pin-house.json │ ├── map-pin-minus-inside.json │ ├── map-pin-minus.json │ ├── map-pin-off.json │ ├── map-pin-plus-inside.json │ ├── map-pin-plus.json │ ├── map-pin-x-inside.json │ ├── map-pin.json │ ├── maximize-2.json │ ├── maximize.json │ ├── meh.json │ ├── menu.json │ ├── message-circle-check.json │ ├── message-circle-dashed.json │ ├── message-circle-more.json │ ├── message-circle-plus.json │ ├── message-circle-x.json │ ├── message-circle.json │ ├── message-square-check.json │ ├── message-square-dashed.json │ ├── message-square-more.json │ ├── message-square-plus.json │ ├── message-square-x.json │ ├── message-square.json │ ├── mic-off.json │ ├── mic.json │ ├── minimize.json │ ├── monitor-check.json │ ├── moon.json │ ├── nfc.json │ ├── panel-left-close.json │ ├── panel-left-open.json │ ├── panel-right-open.json │ ├── party-popper.json │ ├── pause.json │ ├── pen-tool.json │ ├── philippine-peso.json │ ├── pickaxe.json │ ├── play.json │ ├── plug-zap.json │ ├── plus.json │ ├── pound-sterling.json │ ├── rabbit.json │ ├── radio-tower.json │ ├── radio.json │ ├── redo-dot.json │ ├── redo.json │ ├── refresh-ccw-dot.json │ ├── refresh-ccw.json │ ├── refresh-cw-off.json │ ├── refresh-cw.json │ ├── registry.json │ ├── rocket.json │ ├── rocking-chair.json │ ├── roller-coaster.json │ ├── rotate-ccw.json │ ├── rotate-cw.json │ ├── route.json │ ├── russian-ruble.json │ ├── saudi-riyal.json │ ├── scan-face.json │ ├── scan-text.json │ ├── search.json │ ├── send.json │ ├── settings-gear.json │ ├── settings.json │ ├── shield-check.json │ ├── ship.json │ ├── shower-head.json │ ├── shrink.json │ ├── sliders-horizontal.json │ ├── smartphone-charging.json │ ├── smartphone-nfc.json │ ├── smile-plus.json │ ├── smile.json │ ├── snowflake.json │ ├── sparkles.json │ ├── square-activity.json │ ├── square-arrow-down.json │ ├── square-arrow-left.json │ ├── square-arrow-right.json │ ├── square-arrow-up.json │ ├── square-chevron-down.json │ ├── square-chevron-left.json │ ├── square-chevron-right.json │ ├── square-chevron-up.json │ ├── square-pen.json │ ├── square-stack.json │ ├── stethoscope.json │ ├── sun-dim.json │ ├── sun-medium.json │ ├── sun-moon.json │ ├── sun.json │ ├── sunset.json │ ├── swiss-franc.json │ ├── syringe.json │ ├── telescope.json │ ├── terminal.json │ ├── thermometer.json │ ├── timer.json │ ├── tornado.json │ ├── train-track.json │ ├── trending-down.json │ ├── trending-up-down.json │ ├── trending-up.json │ ├── truck.json │ ├── turkish-lira.json │ ├── twitch.json │ ├── twitter.json │ ├── underline.json │ ├── undo-dot.json │ ├── undo.json │ ├── upload.json │ ├── upvote.json │ ├── user-check.json │ ├── user-round-check.json │ ├── user-round-plus.json │ ├── user.json │ ├── users.json │ ├── vibrate.json │ ├── volume.json │ ├── washing-machine.json │ ├── waves-ladder.json │ ├── waves.json │ ├── waypoints.json │ ├── webhook.json │ ├── wifi-low.json │ ├── wifi.json │ ├── wind-arrow-down.json │ ├── wind.json │ ├── workflow.json │ ├── wrench.json │ ├── x.json │ ├── youtube.json │ ├── zap-off.json │ └── zap.json ├── registry.json ├── scripts/ │ ├── check-duplicates.ts │ ├── check-icon-style.ts │ ├── check-imports.ts │ ├── download-fonts.js │ ├── registry-build.ts │ ├── registry-components.ts │ ├── registry-schema.ts │ └── sync-registry.ts ├── seo/ │ ├── json-ld.tsx │ └── metadata.ts └── tsconfig.json ================================================ FILE CONTENTS ================================================ ================================================ FILE: .github/pull_request_template.md ================================================ ## I have read the [CONTRIBUTING.md](https://github.com/pqoqubbw/icons/blob/main/CONTRIBUTING.md) file. YES/NO ## What kind of change does this PR introduce? Bug fix, feature, docs update, ... ## What is the new behavior? Feel free to include screenshots if it includes visual changes. ## Demo Please attach a short video demo of the changes. ## Additional context Add any other context or screenshots. ================================================ FILE: .github/workflows/ci.yml ================================================ name: CI on: pull_request: branches: [main] push: branches: [main] jobs: check-imports: name: Check Imports runs-on: ubuntu-latest steps: - name: Checkout uses: actions/checkout@v4 - name: Setup pnpm uses: pnpm/action-setup@v4 with: version: 9 - name: Setup Node.js uses: actions/setup-node@v4 with: node-version: '20' cache: 'pnpm' - name: Install dependencies run: pnpm install --frozen-lockfile - name: Check imports run: pnpm check-imports check-duplicates: name: Check Duplicates runs-on: ubuntu-latest steps: - name: Checkout uses: actions/checkout@v4 - name: Setup pnpm uses: pnpm/action-setup@v4 with: version: 9 - name: Setup Node.js uses: actions/setup-node@v4 with: node-version: '20' cache: 'pnpm' - name: Install dependencies run: pnpm install --frozen-lockfile - name: Check duplicates run: pnpm check-duplicates ================================================ FILE: .gitignore ================================================ # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. # dependencies /node_modules /.pnp .pnp.* .yarn/* !.yarn/patches !.yarn/plugins !.yarn/releases !.yarn/versions _app/* package-lock.json yarn.lock # testing /coverage # next.js /.next/ /out/ # production /build # misc .DS_Store *.pem # debug npm-debug.log* yarn-debug.log* yarn-error.log* # env files (can opt-in for commiting if needed) .env* # vercel .vercel .cursor # typescript *.tsbuildinfo next-env.d.ts # proprietary fonts (not licensed for public distribution) # fonts are downloaded at build time from Vercel Blob Storage /fonts/*.woff /fonts/*.woff2 /fonts/*.ttf /fonts/*.otf /fonts/*EULA.pdf /fonts/Grilli-Type-EULA.pdf ================================================ FILE: .vscode/settings.json ================================================ { "cSpell.words": ["Downvote", "LUCIDE", "nuqs", "pqoqubbw", "Upvote"], "typescript.tsdk": "node_modules/typescript/lib", "css.lint.unknownAtRules": "ignore", "editor.defaultFormatter": "biomejs.biome", "editor.formatOnSave": true, "biome.enabled": true, "editor.codeActionsOnSave": { "source.organizeImports.biome": "explicit", "source.fixAll.biome": "explicit" }, "[typescript]": { "editor.defaultFormatter": "biomejs.biome" }, "[typescriptreact]": { "editor.defaultFormatter": "biomejs.biome" }, "[javascript]": { "editor.defaultFormatter": "biomejs.biome" }, "[javascriptreact]": { "editor.defaultFormatter": "biomejs.biome" }, "[json]": { "editor.defaultFormatter": "biomejs.biome" }, "[jsonc]": { "editor.defaultFormatter": "biomejs.biome" } } ================================================ FILE: CONTRIBUTING.md ================================================ # Contributing **IMPORTANT:** This project only accepts contributions based on [lucide icons](https://lucide.dev/). Pull requests containing custom icons or icons from other icon packs will be closed. **Animation Quality:** Pull requests with simple path length animations (`strokeDasharray`/`strokeDashoffset` "drawing" effect) will likely be rejected. This type of animation looks generic and doesn't add meaningful interaction. We're looking for creative, purposeful animations that enhance the icon's meaning. We welcome contributions to our project! Please follow these steps to contribute: 1. Fork the repository on GitHub. 2. Clone your forked repository to your local machine: ``` git clone https://github.com/pqoqubbw/icons.git ``` 3. Navigate to the project directory: ``` cd icons ``` 4. Create a new branch for your feature or bug fix: ``` git checkout -b your-branch-name ``` 5. Install the project dependencies: ``` pnpm install ``` 6. **Create your animated icon:** a. Navigate to the `/icons/` directory and create a new file with the icon name in lowercase, using hyphens for spaces (following Lucide naming convention): ``` /icons/[icon-name].tsx ``` For example: `heart-icon.tsx`, `arrow-up.tsx`, `user-profile.tsx` b. Copy and paste the following template code into your new file: ```tsx 'use client'; import { useAnimation } from 'motion/react'; import type { HTMLAttributes } from 'react'; import { forwardRef, useCallback, useImperativeHandle, useRef } from 'react'; import { cn } from '@/lib/utils'; export interface [YourIconName]IconHandle { startAnimation: () => void; stopAnimation: () => void; } interface [YourIconName]IconProps extends HTMLAttributes { size?: number; } const [YourIconName]Icon = forwardRef<[YourIconName]IconHandle, [YourIconName]IconProps>( ({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => { const controls = useAnimation(); const isControlledRef = useRef(false); useImperativeHandle(ref, () => { isControlledRef.current = true; return { startAnimation: () => controls.start('animate'), stopAnimation: () => controls.start('normal'), }; }); const handleMouseEnter = useCallback( (e: React.MouseEvent) => { if (!isControlledRef.current) { controls.start('animate'); } else { onMouseEnter?.(e); } }, [controls, onMouseEnter] ); const handleMouseLeave = useCallback( (e: React.MouseEvent) => { if (!isControlledRef.current) { controls.start('normal'); } else { onMouseLeave?.(e); } }, [controls, onMouseLeave] ); return (
{/* your svg code here */}
); } ); [YourIconName]Icon.displayName = '[YourIconName]Icon'; export { [YourIconName]Icon }; ``` c. Replace `[YourIconName]` with your icon name in **PascalCase** (e.g., `HeartIcon`, `ArrowUp`, `UserProfile`). d. Find your icon on [lucide.dev](https://lucide.dev/), copy the SVG path elements, and replace the `{/* your svg code here */}` comment with the actual SVG content. e. Add your animation logic using Framer Motion's `motion` components and the `controls` object to create engaging hover animations. 7. **Add your icon to the icon list:** a. Open the `icons/index.tsx` file. b. Import your new icon component at the top of the file: ```tsx import { [YourIconName]Icon } from './[icon-name]'; ``` c. Add your icon to the `ICON_LIST` array at the very beginning (top) of the list in this format: ```tsx { name: '[icon-name]', icon: [YourIconName]Icon, keywords: ['keyword1', 'keyword2', 'keyword3'], }, ``` For example: ```tsx { name: 'smile-plus', icon: SmilePlusIcon, keywords: ['smile', 'plus', 'emotion', 'face'], }, ``` Note: Use the exact icon name, keywords, and other data from the [lucide.dev](https://lucide.dev/) website for your specific icon. 8. **Update the registry (for new icons):** After creating a new icon, you need to update the registry so it can be used with the shadcn CLI: ``` pnpm run gen-cli ``` This command will automatically sync your new icon to the registry and build the necessary JSON files. 9. Build the project to check for errors: ``` pnpm build ``` 10. Test the application to ensure your changes work as expected: ``` pnpm lint ``` 11. Commit your changes: ``` git commit -m "Add [icon-name] animated icon" ``` 12. Push your changes to your fork: ``` git push origin your-branch-name ``` 13. Open a pull request on the original repository with a clear description of the icon you've added and the animation you've implemented. Thank you for contributing to our project! ================================================ FILE: LICENSE ================================================ MIT License Copyright (c) 2024-2026 pqoqubbw Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. ================================================ FILE: README.md ================================================ Vercel OSS Program
## `lucide-animated` is beautifully crafted animated icons. ![preview](./public/og.png) **Demo** → [lucide-animated](https://lucide-animated.com) **Sponsorship** → [lucide-animated/sponsorship](https://lucide-animated.com/sponsorship) #### Svelte icons: [movingicons.dev](https://www.movingicons.dev/) by [@jis3r](https://github.com/jis3r) #### Vue icons: [imfenghuang.github.io/icons](https://imfenghuang.github.io/icons/) by [@imfenghuang](https://github.com/imfenghuang) #### Angular icons: [ajitzero/animated-icons](https://github.com/ajitzero/animated-icons) by [@ajitzero](https://github.com/ajitzero) #### Flutter icons: [flutter_lucide_animated](https://pub.dev/packages/flutter_lucide_animated) by [@ravikovind](https://github.com/ravikovind) ## Contributing We welcome contributions to `lucide-animated`! Please read our [contributing guidelines](CONTRIBUTING.md) on how to submit improvements and new icons. ## Terms of Use Feel free to use these components in personal and commercial projects. However, while the tutorials and demos are available for your use as-is, they cannot be redistributed or resold. Let’s keep things fair and respect each other’s work. If you have any questions or just want to say hi, feel free to reach out to me on X 👉 [@pqoqubbw](https://x.com/pqoqubbw). ## Notes This project is a work in progress, and i'm continuously working to improve and expand this collection. I’d love to hear your feedback or see your contributions as the project evolves! ================================================ FILE: actions/get-icon-content.ts ================================================ "use server"; import { promises as fs } from "node:fs"; import path from "node:path"; const ICONS_DIRECTORY = "icons"; export async function getIconContent(name: string): Promise { const iconsDir = path.join(process.cwd(), ICONS_DIRECTORY); const content = await fs.readFile( path.join(iconsDir, `${name}.tsx`), "utf-8" ); return content; } ================================================ FILE: actions/get-icons.ts ================================================ import { ICON_LIST } from "@/icons"; type Icon = { name: string; keywords: string[]; }; const getIcons = (): Icon[] => { return ICON_LIST.map(({ name, keywords }) => ({ name, keywords, })); }; export { getIcons }; export type { Icon }; ================================================ FILE: actions/open-in-v0.ts ================================================ "use server"; import { SITE } from "@/constants"; import { getIconForV0 } from "@/helpers/get-icon-for-v0"; export async function openInV0Action(name: string) { try { const template = await getIconForV0(name); if (!template) { throw new Error(`Icon ${name} not found.`); } const payload = { ...template, meta: { project: SITE.NAME, author: SITE.AUTHOR.NAME, url: SITE.URL, }, source: { title: SITE.NAME, url: SITE.URL, file: `${name}.tsx`, }, }; const response = await fetch("https://v0.dev/chat/api/templates/open", { method: "POST", body: JSON.stringify({ version: 3, template: payload, }), headers: { "x-v0-edit-secret": process.env.V0_API_KEY ?? "", "Content-Type": "application/json", }, }); if (!response.ok) { if (response.status === 403) { throw new Error("Unauthorized"); } console.error( "Eror fetching /api/templates/open:", await response.text() ); throw new Error("Something went wrong. Please try again later."); } const result = await response.json(); return { error: null, url: result.url, }; } catch (error) { console.error(error); if (error instanceof Error) { return { error: error.message, url: null }; } return { error: "Something went wrong. Please try again later.", url: "" }; } } ================================================ FILE: app/globals.css ================================================ @import "tailwindcss"; @import "tw-animate-css"; @plugin "@toolwind/corner-shape"; @custom-variant dark (&:is(.dark *)); @theme inline { --color-background: var(--background); --color-foreground: var(--foreground); --color-primary: var(--primary); --color-secondary: var(--secondary); --radius-lg: var(--radius); --radius-md: calc(var(--radius) - 2px); --radius-sm: calc(var(--radius) - 4px); } :root { --background: #f2f2f2; --foreground: #000; --primary: #ee4822; --secondary: #3f3f47; --radius: 0.4rem; } .dark { --background: #171717; --foreground: #fff; --secondary-bg: #262626; --secondary: #d4d4d4; } @layer base { * { scrollbar-width: thin; scrollbar-color: var(--color-neutral-700) transparent; } html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-tap-highlight-color: transparent; } html[data-base-ui-scroll-locked] { scroll-behavior: auto; } body { background-color: var(--background); color: var(--foreground); overscroll-behavior: none; } ::selection { background-color: var(--primary); color: white; } .root { isolation: isolate; display: flex; flex-direction: column; min-height: 100vh; } ::-webkit-scrollbar { width: 2px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--color-neutral-700); border-radius: 6px; } kbd { @apply flex size-5 items-center justify-center rounded-[4px] select-none; @apply font-sans text-xs uppercase; @apply bg-neutral-200 text-neutral-500 dark:bg-neutral-800 dark:text-neutral-300; @apply cursor-pointer transition-transform duration-100 active:scale-95; } } ================================================ FILE: app/icon.tsx ================================================ import { ImageResponse } from "next/og"; export const runtime = "edge"; export const size = { width: 31, height: 30, }; export const contentType = "image/png"; export default function Icon() { return new ImageResponse( , { ...size, } ); } ================================================ FILE: app/icons/[slug]/icon-card.tsx ================================================ "use client"; import { useMemo, useRef } from "react"; import type { Icon } from "@/actions/get-icons"; import { Card, CardActions } from "@/components/card"; import { ICON_LIST } from "@/icons"; type Props = { icon: Icon; }; const IconCard = ({ icon }: Props) => { const animationRef = useRef<{ startAnimation: () => void; stopAnimation: () => void; }>(null); const IconComponent = useMemo(() => { return ICON_LIST.find((item) => item.name === icon.name)?.icon; }, [icon.name]); if (!IconComponent) { return null; } return ( animationRef.current?.startAnimation()} onMouseLeave={() => animationRef.current?.stopAnimation()} > ); }; export { IconCard }; ================================================ FILE: app/icons/[slug]/page.tsx ================================================ import { ArrowLeftIcon } from "lucide-react"; import type { Metadata } from "next"; import Link from "next/link"; import { notFound } from "next/navigation"; import { CliBlock } from "@/components/cli-block"; import { LINK, SITE } from "@/constants"; import { ICON_LIST } from "@/icons"; import { kebabToPascalCase } from "@/lib/kebab-to-pascal"; import { BreadcrumbJsonLd } from "@/seo/json-ld"; import { baseMetadata } from "@/seo/metadata"; import { IconCard } from "./icon-card"; import { SimilarIcons } from "./similar-icons"; type Props = { params: Promise<{ slug: string }>; }; const getIconBySlug = (slug: string) => { return ICON_LIST.find((icon) => icon.name === slug); }; export const generateStaticParams = () => { return ICON_LIST.map((icon) => ({ slug: icon.name, })); }; export const generateMetadata = async ({ params, }: Props): Promise => { const { slug } = await params; const icon = getIconBySlug(slug); if (!icon) { return { title: "Icon Not Found", }; } const pascalName = kebabToPascalCase(slug); const [keyword] = pascalName.split("Icon"); const title = `${keyword} Icon - Animated React Icon`; const description = `Free animated ${icon.name} icon for React. Smooth Motion-powered animation, copy-paste ready. Keywords: ${icon.keywords.slice(0, 5).join(", ")}.`; return { title, description, alternates: { canonical: `/icons/${slug}`, }, openGraph: { ...baseMetadata.openGraph, title: `${pascalName} | ${SITE.NAME}`, description, url: `${SITE.URL}/icons/${slug}`, type: "website", }, twitter: { ...baseMetadata.twitter, title: `${pascalName} | ${SITE.NAME}`, description, }, keywords: [ ...icon.keywords, "animated icon", "react icon", "motion icon", `${icon.name} animation`, `${icon.name} react`, ], }; }; const IconJsonLd = ({ icon }: { icon: (typeof ICON_LIST)[number] }) => { const pascalName = kebabToPascalCase(icon.name); const jsonLd = { "@context": "https://schema.org", "@type": "SoftwareSourceCode", name: pascalName, description: `Animated ${icon.name} icon component for React`, codeRepository: LINK.GITHUB, programmingLanguage: ["TypeScript", "React"], license: LINK.LICENSE, isPartOf: { "@type": "SoftwareSourceCode", name: SITE.NAME, url: SITE.URL, }, keywords: icon.keywords.join(", "), }; return (