UI Components
Lucide Icons
Add icons to your UI with Lucide. The pulse-lucide package provides 1600+ icons as Python components.
Basic Usage
Import icons by name and use them like any Pulse component.
import pulse as ps
from pulse_lucide import Heart, Search, Settings, User
@ps.component
def Toolbar():
return ps.div(className="flex gap-4")[
Search(size=24),
Heart(size=24, color="red"),
Settings(size=24, strokeWidth=1.5),
User(size=24),
]
app = ps.App([ps.Route("/", Toolbar)])Props
All icons accept these props:
| Prop | Description | Default |
|---|---|---|
size | Width and height in pixels | 24 |
color | Stroke color | currentColor |
strokeWidth | Line thickness | 2 |
absoluteStrokeWidth | Keep stroke width constant regardless of size | false |
from pulse_lucide import Star
# Different sizes
Star(size=16) # Small
Star(size=24) # Default
Star(size=32) # Large
# Custom styling
Star(color="#ffd700", strokeWidth=1.5)Icon Buttons
Combine icons with buttons for common UI patterns.
import pulse as ps
from pulse_lucide import Plus, Trash, Edit
@ps.component
def ActionButtons():
return ps.div(className="flex gap-2")[
ps.button(className="p-2 bg-blue-500 text-white rounded")[
Plus(size=20),
],
ps.button(className="p-2 bg-gray-200 rounded")[
Edit(size=20),
],
ps.button(className="p-2 bg-red-500 text-white rounded")[
Trash(size=20),
],
]Common Icons
Navigation: ChevronLeft, ChevronRight, ArrowUp, ArrowDown, Menu, X
Actions: Search, Plus, Minus, Edit, Trash, Save, Download, Upload
Status: Check, AlertCircle, Info, HelpCircle, Bell, Star
Files: File, Folder, FileText, Image, Video, Music
User: User, Users, UserPlus, Settings, LogIn, LogOut
Browse all icons at lucide.dev/icons.