Open-source source
Icons provided by the Lucide icon set (MIT license).
Copy name is for lucide-react imports. Copy SVG is raw markup. Copy React creates a standalone component.
AArrowDown
Copy actions
AArrowUp
Copy actions
Accessibility
Copy actions
Activity
Copy actions
Airplay
Copy actions
AirVent
Copy actions
ALargeSmall
Copy actions
AlarmClock
Copy actions
AlarmClockCheck
Copy actions
AlarmClockMinus
Copy actions
AlarmClockOff
Copy actions
AlarmClockPlus
Copy actions
AlarmSmoke
Copy actions
Album
Copy actions
AlignCenterHorizontal
Copy actions
AlignCenterVertical
Copy actions
AlignEndHorizontal
Copy actions
AlignEndVertical
Copy actions
AlignHorizontalDistributeCenter
Copy actions
AlignHorizontalDistributeEnd
Copy actions
AlignHorizontalDistributeStart
Copy actions
AlignHorizontalJustifyCenter
Copy actions
AlignHorizontalJustifyEnd
Copy actions
AlignHorizontalJustifyStart
Copy actions
AlignHorizontalSpaceAround
Copy actions
AlignHorizontalSpaceBetween
Copy actions
AlignStartHorizontal
Copy actions
AlignStartVertical
Copy actions
AlignVerticalDistributeCenter
Copy actions
AlignVerticalDistributeEnd
Copy actions
AlignVerticalDistributeStart
Copy actions
AlignVerticalJustifyCenter
Copy actions
AlignVerticalJustifyEnd
Copy actions
AlignVerticalJustifyStart
Copy actions
AlignVerticalSpaceAround
Copy actions
AlignVerticalSpaceBetween
Copy actions
Ambulance
Copy actions
Ampersand
Copy actions
Ampersands
Copy actions
Amphora
Copy actions
Anchor
Copy actions
Angry
Copy actions
Annoyed
Copy actions
Antenna
Copy actions
Anvil
Copy actions
Aperture
Copy actions
Apple
Copy actions
AppWindow
Copy actions
AppWindowMac
Copy actions
Archive
Copy actions
ArchiveRestore
Copy actions
ArchiveX
Copy actions
Armchair
Copy actions
ArrowBigDown
Copy actions
ArrowBigDownDash
Copy actions
ArrowBigLeft
Copy actions
ArrowBigLeftDash
Copy actions
ArrowBigRight
Copy actions
ArrowBigRightDash
Copy actions
ArrowBigUp
Copy actions
ArrowBigUpDash
Copy actions
ArrowDown
Copy actions
ArrowDown01
Copy actions
ArrowDown10
Copy actions
ArrowDownAZ
Copy actions
ArrowDownFromLine
Copy actions
ArrowDownLeft
Copy actions
ArrowDownNarrowWide
Copy actions
ArrowDownRight
Copy actions
ArrowDownToDot
Copy actions
ArrowDownToLine
Copy actions
ArrowDownUp
Copy actions
ArrowDownWideNarrow
Copy actions
ArrowDownZA
Copy actions
ArrowLeft
Copy actions
ArrowLeftFromLine
Copy actions
ArrowLeftRight
Copy actions
ArrowLeftToLine
Copy actions
ArrowRight
Copy actions
ArrowRightFromLine
Copy actions
ArrowRightLeft
Copy actions
ArrowRightToLine
Copy actions
ArrowsUpFromLine
Copy actions
ArrowUp
Copy actions
ArrowUp01
Copy actions
ArrowUp10
Copy actions
ArrowUpAZ
Copy actions
ArrowUpDown
Copy actions
ArrowUpFromDot
Copy actions
ArrowUpFromLine
Copy actions
ArrowUpLeft
Copy actions
ArrowUpNarrowWide
Copy actions
ArrowUpRight
Copy actions
ArrowUpToLine
Copy actions
ArrowUpWideNarrow
Copy actions
ArrowUpZA
Copy actions
Asterisk
Copy actions
Atom
Copy actions
AtSign
Copy actions
AudioLines
Copy actions
AudioWaveform
Copy actions
Award
Copy actions
Axe
Copy actions
Axis3d
Copy actions
Baby
Copy actions
Backpack
Copy actions
Badge
Copy actions
BadgeAlert
Copy actions
BadgeCent
Copy actions
BadgeCheck
Copy actions
BadgeDollarSign
Copy actions
BadgeEuro
Copy actions
BadgeIndianRupee
Copy actions
BadgeInfo
Copy actions
BadgeJapaneseYen
Copy actions
BadgeMinus
Copy actions
BadgePercent
Copy actions
BadgePlus
Copy actions
BadgePoundSterling
Copy actions
BadgeQuestionMark
Copy actions
Open-source SVG icon set
This page lists the full Lucide icon library with fast search, previews, and copy-friendly outputs for design and development workflows.
- Use icon names directly with lucide-react
- Grab raw SVG markup for Figma or HTML
- Copy React components for no-dependency usage
- Open icons instantly in SVG Editor for cleanup
SVG icon usage examples
Common ways to use this SVG icon library in React, HTML, and design workflows.
Use with lucide-react
Import by name and render the icon as a React component.
import { Activity } from "lucide-react";
export function IconExample() {
return <Activity className="h-6 w-6" />;
}
Inline SVG in HTML
Paste raw SVG markup directly into your HTML or design tool.
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M4 12h4l2-7 4 14 2-7h4" />
</svg>
Standalone React component
Copy the SVG into a reusable React component without extra dependencies.
export function ActivityIcon(props: React.SVGProps<SVGSVGElement>) {
return (
<svg {...props} width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
<path d="M4 12h4l2-7 4 14 2-7h4" />
</svg>
);
}