Graphics¶
Vector drawing and visual effects: Icon for the
bundled Lucide icon set, Svg with the shape
classes in pythonnative.svg (below), and the
LinearGradient and
BlurView containers. The component
factories themselves are documented on the Components page.
import pythonnative as pn
from pythonnative import svg
pn.Icon("heart", color="#DC2626")
pn.Svg(
svg.Circle(cx=12, cy=12, r=10, fill="#FDE68A"),
svg.Path(d="M8 13 q4 5 8 0", stroke="#B45309", stroke_width=2, fill="none"),
style=pn.style(width=48, height=48),
)
pn.LinearGradient(pn.Text("Hi"), colors=["#6366F1", "#EC4899"], style=pn.style(padding=16))
See the Assets guide for the drawing model and platform notes.
Icons¶
Cross-platform icons drawn from the bundled Lucide set.
Icon renders any of the 1,800+ Lucide icons as a
vector Svg, so the same name looks the same on iOS,
Android, and in the browser preview, and one color prop tints every
icon:
import pythonnative as pn
pn.Row(
pn.Icon("heart", size=20, color="#E11D48"),
pn.Text("Favorites"),
style=pn.style(spacing=8, align_items="center"),
)
Names are the Lucide names ("house", "settings",
"chevron-right"); browse them at https://lucide.dev/icons. The
IconName literal gives editors
completion and type checkers a way to catch typos. Tab bars accept the
same names through tab_bar_icon.
The icon data ships with PythonNative (_lucide.json, ISC license,
regenerated by scripts/generate-icons.py); nothing is downloaded at
runtime.
Functions:
| Name | Description |
|---|---|
icon_names |
Every available icon name, sorted. |
is_icon_name |
Whether |
icon_shapes |
The flattened shape records that draw |
Icon |
Render a bundled vector icon. |
tab_icon_spec |
Resolve a |
Attributes:
| Name | Type | Description |
|---|---|---|
IconName |
Every icon name bundled with PythonNative (Lucide). |
|
ICON_VIEW_BOX |
Every bundled icon is drawn on a 24 by 24 grid. |
|
IconSpec |
The wire form of a tab bar icon: |
module-attribute
¶
IconName = Literal[
"a-arrow-down",
"a-arrow-up",
"a-large-small",
"accessibility",
"activity",
"ad",
"air-vent",
"airplay",
"alarm-clock",
"alarm-clock-check",
"alarm-clock-minus",
"alarm-clock-off",
"alarm-clock-plus",
"alarm-smoke",
"align-center-horizontal",
"align-center-vertical",
"align-end-horizontal",
"align-end-vertical",
"align-horizontal-distribute-center",
"align-horizontal-distribute-end",
"align-horizontal-distribute-start",
"align-horizontal-justify-center",
"align-horizontal-justify-end",
"align-horizontal-justify-start",
"align-horizontal-space-around",
"align-horizontal-space-between",
"align-start-horizontal",
"align-start-vertical",
"align-vertical-distribute-center",
"align-vertical-distribute-end",
"align-vertical-distribute-start",
"align-vertical-justify-center",
"align-vertical-justify-end",
"align-vertical-justify-start",
"align-vertical-space-around",
"align-vertical-space-between",
"ambulance",
"ampersand",
"ampersands",
"amphora",
"anchor",
"angle",
"antenna",
"anvil",
"aperture",
"app-window",
"app-window-mac",
"apple",
"archive",
"archive-restore",
"archive-x",
"armchair",
"arrow-big-down",
"arrow-big-down-dash",
"arrow-big-left",
"arrow-big-left-dash",
"arrow-big-right",
"arrow-big-right-dash",
"arrow-big-up",
"arrow-big-up-dash",
"arrow-down",
"arrow-down-0-1",
"arrow-down-1-0",
"arrow-down-a-z",
"arrow-down-from-line",
"arrow-down-left",
"arrow-down-narrow-wide",
"arrow-down-right",
"arrow-down-to-dot",
"arrow-down-to-line",
"arrow-down-up",
"arrow-down-wide-narrow",
"arrow-down-z-a",
"arrow-left",
"arrow-left-from-line",
"arrow-left-right",
"arrow-left-to-line",
"arrow-right",
"arrow-right-from-line",
"arrow-right-left",
"arrow-right-to-line",
"arrow-up",
"arrow-up-0-1",
"arrow-up-1-0",
"arrow-up-a-z",
"arrow-up-down",
"arrow-up-from-dot",
"arrow-up-from-line",
"arrow-up-left",
"arrow-up-narrow-wide",
"arrow-up-right",
"arrow-up-to-line",
"arrow-up-wide-narrow",
"arrow-up-z-a",
"arrows-up-from-line",
"asterisk",
"astroid",
"at-sign",
"atom",
"audio-lines",
"audio-lines-off",
"audio-lines-x",
"audio-waveform",
"award",
"axe",
"axis-3d",
"baby",
"backpack",
"badge",
"badge-alert",
"badge-cent",
"badge-check",
"badge-dollar-sign",
"badge-euro",
"badge-indian-rupee",
"badge-info",
"badge-japanese-yen",
"badge-minus",
"badge-percent",
"badge-plus",
"badge-pound-sterling",
"badge-question-mark",
"badge-russian-ruble",
"badge-swiss-franc",
"badge-turkish-lira",
"badge-x",
"baggage-claim",
"balloon",
"ban",
"banana",
"bandage",
"banknote",
"banknote-arrow-down",
"banknote-arrow-up",
"banknote-check",
"banknote-x",
"barcode",
"barrel",
"baseline",
"bath",
"battery",
"battery-charging",
"battery-full",
"battery-low",
"battery-medium",
"battery-plus",
"battery-warning",
"beaker",
"bean",
"bean-off",
"bed",
"bed-double",
"bed-single",
"beef",
"beef-off",
"beer",
"beer-off",
"bell",
"bell-check",
"bell-dot",
"bell-electric",
"bell-minus",
"bell-off",
"bell-plus",
"bell-ring",
"between-horizontal-end",
"between-horizontal-start",
"between-vertical-end",
"between-vertical-start",
"biceps-flexed",
"bike",
"binary",
"binoculars",
"biohazard",
"bird",
"birdhouse",
"bitcoin",
"blend",
"blender",
"blinds",
"blocks",
"bluetooth",
"bluetooth-connected",
"bluetooth-off",
"bluetooth-searching",
"bold",
"bolt",
"bomb",
"bone",
"bone-fracture",
"book",
"book-a",
"book-alert",
"book-audio",
"book-bookmark",
"book-check",
"book-copy",
"book-dashed",
"book-down",
"book-headphones",
"book-heart",
"book-image",
"book-key",
"book-lock",
"book-minus",
"book-open",
"book-open-check",
"book-open-text",
"book-plus",
"book-search",
"book-text",
"book-type",
"book-up",
"book-up-2",
"book-user",
"book-x",
"bookmark",
"bookmark-check",
"bookmark-minus",
"bookmark-off",
"bookmark-plus",
"bookmark-x",
"boom-box",
"bot",
"bot-message-square",
"bot-off",
"bottle-wine",
"bow-arrow",
"box",
"boxes",
"braces",
"brackets",
"brain",
"brain-circuit",
"brain-cog",
"brick-wall",
"brick-wall-fire",
"brick-wall-shield",
"bridge",
"briefcase",
"briefcase-business",
"briefcase-conveyor-belt",
"briefcase-medical",
"bring-to-front",
"broccoli",
"broom",
"broom-sparkles",
"brush",
"brush-cleaning",
"bubbles",
"bug",
"bug-off",
"bug-play",
"building",
"building-complex",
"building-complex-plus",
"bus",
"bus-front",
"cable",
"cable-car",
"cake",
"cake-slice",
"calculator",
"calendar",
"calendar-1",
"calendar-arrow-down",
"calendar-arrow-up",
"calendar-check",
"calendar-check-2",
"calendar-chevrons-right",
"calendar-clock",
"calendar-cog",
"calendar-days",
"calendar-fold",
"calendar-heart",
"calendar-minus",
"calendar-minus-2",
"calendar-off",
"calendar-plus",
"calendar-plus-2",
"calendar-range",
"calendar-search",
"calendar-sync",
"calendar-x",
"calendar-x-2",
"calendars",
"camera",
"camera-off",
"can",
"can-soda",
"candy",
"candy-cane",
"candy-off",
"cannabis",
"cannabis-off",
"captions",
"captions-off",
"car",
"car-battery",
"car-front",
"car-taxi-front",
"caravan",
"card-sim",
"carrot",
"carton",
"carton-off",
"case-lower",
"case-sensitive",
"case-upper",
"cassette-tape",
"cast",
"castle",
"cat",
"cctv",
"cctv-off",
"chart-area",
"chart-bar",
"chart-bar-big",
"chart-bar-decreasing",
"chart-bar-increasing",
"chart-bar-stacked",
"chart-candlestick",
"chart-column",
"chart-column-big",
"chart-column-decreasing",
"chart-column-increasing",
"chart-column-stacked",
"chart-gantt",
"chart-line",
"chart-network",
"chart-no-axes-column",
"chart-no-axes-column-decreasing",
"chart-no-axes-column-increasing",
"chart-no-axes-combined",
"chart-no-axes-gantt",
"chart-pie",
"chart-scatter",
"chart-spline",
"check",
"check-check",
"check-line",
"chef-hat",
"cherry",
"chess-bishop",
"chess-king",
"chess-knight",
"chess-pawn",
"chess-queen",
"chess-rook",
"chevron-down",
"chevron-first",
"chevron-last",
"chevron-left",
"chevron-right",
"chevron-up",
"chevrons-down",
"chevrons-down-up",
"chevrons-left",
"chevrons-left-right",
"chevrons-left-right-ellipsis",
"chevrons-right",
"chevrons-right-left",
"chevrons-up",
"chevrons-up-down",
"church",
"cigarette",
"cigarette-off",
"circle",
"circle-alert",
"circle-arrow-down",
"circle-arrow-left",
"circle-arrow-out-down-left",
"circle-arrow-out-down-right",
"circle-arrow-out-up-left",
"circle-arrow-out-up-right",
"circle-arrow-right",
"circle-arrow-up",
"circle-check",
"circle-check-big",
"circle-chevron-down",
"circle-chevron-left",
"circle-chevron-right",
"circle-chevron-up",
"circle-dashed",
"circle-dashed-check",
"circle-divide",
"circle-dollar-sign",
"circle-dot",
"circle-dot-dashed",
"circle-ellipsis",
"circle-equal",
"circle-euro",
"circle-fading-arrow-up",
"circle-fading-plus",
"circle-gauge",
"circle-minus",
"circle-off",
"circle-parking",
"circle-parking-off",
"circle-pause",
"circle-percent",
"circle-pile",
"circle-play",
"circle-plus",
"circle-pound-sterling",
"circle-power",
"circle-question-mark",
"circle-slash",
"circle-slash-2",
"circle-small",
"circle-star",
"circle-stop",
"circle-user",
"circle-user-round",
"circle-x",
"circuit-board",
"citrus",
"clapperboard",
"clef-alto",
"clef-bass",
"clef-treble",
"clipboard",
"clipboard-check",
"clipboard-clock",
"clipboard-copy",
"clipboard-list",
"clipboard-minus",
"clipboard-paste",
"clipboard-pen",
"clipboard-pen-line",
"clipboard-plus",
"clipboard-type",
"clipboard-x",
"clock",
"clock-1",
"clock-10",
"clock-11",
"clock-12",
"clock-2",
"clock-3",
"clock-4",
"clock-5",
"clock-6",
"clock-7",
"clock-8",
"clock-9",
"clock-alert",
"clock-arrow-down",
"clock-arrow-left",
"clock-arrow-right",
"clock-arrow-up",
"clock-check",
"clock-fading",
"clock-plus",
"closed-caption",
"cloud",
"cloud-alert",
"cloud-backup",
"cloud-check",
"cloud-cog",
"cloud-download",
"cloud-drizzle",
"cloud-fog",
"cloud-hail",
"cloud-lightning",
"cloud-moon",
"cloud-moon-rain",
"cloud-off",
"cloud-rain",
"cloud-rain-wind",
"cloud-snow",
"cloud-sun",
"cloud-sun-rain",
"cloud-sync",
"cloud-upload",
"cloudy",
"clover",
"club",
"code",
"code-xml",
"coffee",
"cog",
"coins",
"columns-2",
"columns-3",
"columns-3-cog",
"columns-4",
"combine",
"command",
"compass",
"component",
"computer",
"concierge-bell",
"cone",
"construction",
"contact",
"contact-round",
"container",
"contrast",
"cookie",
"cooking-pot",
"copy",
"copy-check",
"copy-minus",
"copy-plus",
"copy-slash",
"copy-x",
"copyleft",
"copyright",
"corner-down-left",
"corner-down-right",
"corner-left-down",
"corner-left-up",
"corner-right-down",
"corner-right-up",
"corner-up-left",
"corner-up-right",
"cpu",
"creative-commons",
"credit-card",
"credit-card-check",
"credit-card-minus",
"credit-card-plus",
"credit-card-reader",
"credit-card-x",
"croissant",
"crop",
"cross",
"crosshair",
"crown",
"cuboid",
"cup-soda",
"cupcake",
"currency",
"cylinder",
"dam",
"database",
"database-arrow-down",
"database-arrow-up",
"database-backup",
"database-check",
"database-minus",
"database-plus",
"database-search",
"database-x",
"database-zap",
"decimals-arrow-left",
"decimals-arrow-right",
"delete",
"dessert",
"diameter",
"diamond",
"diamond-minus",
"diamond-percent",
"diamond-plus",
"dice-1",
"dice-2",
"dice-3",
"dice-4",
"dice-5",
"dice-6",
"dices",
"diff",
"disc",
"disc-2",
"disc-3",
"disc-album",
"divide",
"dna",
"dna-off",
"dock",
"dog",
"dollar-sign",
"dome",
"donut",
"door-closed",
"door-closed-locked",
"door-closed-package",
"door-open",
"door-stairwell",
"dot",
"download",
"drafting-compass",
"drama",
"drill",
"drone",
"droplet",
"droplet-off",
"droplets",
"drum",
"drumstick",
"dumbbell",
"ear",
"ear-off",
"earth",
"earth-lock",
"eclipse",
"egg",
"egg-fried",
"egg-off",
"eject",
"ellipse",
"ellipsis",
"ellipsis-vertical",
"engine",
"equal",
"equal-approximately",
"equal-approximately-not",
"equal-not",
"eraser",
"ethernet-port",
"euro",
"ev-charger",
"expand",
"external-link",
"eye",
"eye-closed",
"eye-dashed",
"eye-off",
"face-angry",
"face-expressionless",
"face-grinning",
"face-neutral",
"face-slightly-frowning",
"face-slightly-smiling",
"face-slightly-smiling-plus",
"factory",
"fan",
"fast-forward",
"faucet",
"feather",
"fence",
"ferris-wheel",
"file",
"file-archive",
"file-axis-3d",
"file-badge",
"file-box",
"file-braces",
"file-braces-corner",
"file-chart-column",
"file-chart-column-increasing",
"file-chart-line",
"file-chart-pie",
"file-check",
"file-check-corner",
"file-clock",
"file-code",
"file-code-corner",
"file-cog",
"file-diff",
"file-digit",
"file-down",
"file-exclamation-point",
"file-headphone",
"file-heart",
"file-image",
"file-input",
"file-key",
"file-lock",
"file-minus",
"file-minus-corner",
"file-music",
"file-output",
"file-pen",
"file-pen-line",
"file-play",
"file-plus",
"file-plus-corner",
"file-question-mark",
"file-scan",
"file-search",
"file-search-corner",
"file-signal",
"file-sliders",
"file-spreadsheet",
"file-stack",
"file-symlink",
"file-terminal",
"file-text",
"file-type",
"file-type-corner",
"file-up",
"file-user",
"file-video-camera",
"file-volume",
"file-x",
"file-x-corner",
"files",
"film",
"fingerprint-pattern",
"fire-extinguisher",
"fish",
"fish-off",
"fish-symbol",
"fishing-hook",
"fishing-rod",
"flag",
"flag-off",
"flag-triangle-left",
"flag-triangle-right",
"flame",
"flame-kindling",
"flashlight",
"flashlight-off",
"flask-conical",
"flask-conical-off",
"flask-round",
"flower",
"flower-2",
"focus",
"fold-horizontal",
"fold-vertical",
"folder",
"folder-archive",
"folder-bookmark",
"folder-check",
"folder-clock",
"folder-closed",
"folder-code",
"folder-cog",
"folder-dot",
"folder-down",
"folder-git",
"folder-git-2",
"folder-heart",
"folder-input",
"folder-kanban",
"folder-key",
"folder-lock",
"folder-minus",
"folder-open",
"folder-open-dot",
"folder-output",
"folder-pen",
"folder-plus",
"folder-root",
"folder-search",
"folder-search-2",
"folder-symlink",
"folder-sync",
"folder-tree",
"folder-up",
"folder-x",
"folders",
"footprints",
"forklift",
"form",
"forward",
"frame",
"fuel",
"fullscreen",
"funnel",
"funnel-plus",
"funnel-x",
"galaxy",
"gallery-horizontal",
"gallery-horizontal-end",
"gallery-thumbnails",
"gallery-vertical",
"gallery-vertical-end",
"gamepad",
"gamepad-2",
"gamepad-directional",
"gap-horizontal",
"gap-vertical",
"gauge",
"gavel",
"gem",
"georgian-lari",
"germ",
"germ-off",
"ghost",
"gift",
"git-branch",
"git-branch-minus",
"git-branch-plus",
"git-commit-horizontal",
"git-commit-vertical",
"git-compare",
"git-compare-arrows",
"git-fork",
"git-graph",
"git-merge",
"git-merge-conflict",
"git-pull-request",
"git-pull-request-arrow",
"git-pull-request-closed",
"git-pull-request-create",
"git-pull-request-create-arrow",
"git-pull-request-draft",
"glass-water",
"glasses",
"globe",
"globe-check",
"globe-code",
"globe-lock",
"globe-off",
"globe-x",
"goal",
"gpu",
"graduation-cap",
"grape",
"grid-2x2",
"grid-2x2-check",
"grid-2x2-plus",
"grid-2x2-x",
"grid-3x2",
"grid-3x3",
"grip",
"grip-horizontal",
"grip-vertical",
"group",
"guitar",
"ham",
"hamburger",
"hammer",
"hand",
"hand-coins",
"hand-fist",
"hand-grab",
"hand-heart",
"hand-helping",
"hand-metal",
"hand-platter",
"handbag",
"handshake",
"hard-drive",
"hard-drive-download",
"hard-drive-upload",
"hard-hat",
"hash",
"hat-glasses",
"haze",
"hd",
"hdmi-port",
"heading",
"heading-1",
"heading-2",
"heading-3",
"heading-4",
"heading-5",
"heading-6",
"headphone-off",
"headphones",
"headset",
"heart",
"heart-crack",
"heart-handshake",
"heart-minus",
"heart-off",
"heart-plus",
"heart-pulse",
"heart-x",
"heater",
"helicopter",
"hexagon",
"highlighter",
"hop",
"hop-off",
"hospital",
"hotel",
"hourglass",
"hourglass-cog",
"house",
"house-heart",
"house-plug",
"house-plus",
"house-wifi",
"houses",
"ice-cream-bowl",
"ice-cream-cone",
"id-card",
"id-card-lanyard",
"image",
"image-down",
"image-minus",
"image-off",
"image-play",
"image-plus",
"image-up",
"image-upscale",
"images",
"import",
"inbox",
"indian-rupee",
"infinity",
"info",
"inspection-panel",
"italic",
"iteration-ccw",
"iteration-cw",
"iv-bag",
"japanese-yen",
"joystick",
"kanban",
"kayak",
"key",
"key-round",
"key-square",
"keyboard",
"keyboard-music",
"keyboard-off",
"lambda",
"lamp",
"lamp-ceiling",
"lamp-desk",
"lamp-floor",
"lamp-wall-down",
"lamp-wall-up",
"land-plot",
"landmark",
"languages",
"laptop",
"laptop-minimal",
"laptop-minimal-check",
"lasso",
"lasso-select",
"layer-arrow-down",
"layer-arrow-up",
"layers",
"layers-2",
"layers-arrow-down",
"layers-arrow-up",
"layers-minus",
"layers-plus",
"layout-arrow-down",
"layout-arrow-right",
"layout-dashboard",
"layout-freeform",
"layout-grid",
"layout-list",
"layout-panel-left",
"layout-panel-top",
"layout-template",
"leaf",
"leafy-green",
"lectern",
"lens-concave",
"lens-convex",
"library",
"library-big",
"life-buoy",
"ligature",
"lightbulb",
"lightbulb-off",
"lighthouse",
"line-dot-right-horizontal",
"line-squiggle",
"line-style",
"link",
"link-2",
"link-2-off",
"list",
"list-check",
"list-checks",
"list-chevrons-down-up",
"list-chevrons-up-down",
"list-clock",
"list-collapse",
"list-end",
"list-filter",
"list-filter-plus",
"list-indent-decrease",
"list-indent-increase",
"list-minus",
"list-music",
"list-ordered",
"list-plus",
"list-restart",
"list-sort-ascending",
"list-sort-descending",
"list-start",
"list-todo",
"list-tree",
"list-video",
"list-x",
"loader",
"loader-circle",
"loader-pinwheel",
"locate",
"locate-fixed",
"locate-off",
"lock",
"lock-keyhole",
"lock-keyhole-open",
"lock-open",
"log-in",
"log-out",
"logs",
"lollipop",
"luggage",
"magnet",
"mail",
"mail-badge",
"mail-check",
"mail-clock",
"mail-minus",
"mail-open",
"mail-pen",
"mail-plus",
"mail-question-mark",
"mail-search",
"mail-warning",
"mail-x",
"mailbox",
"mails",
"map",
"map-minus",
"map-pin",
"map-pin-check",
"map-pin-check-inside",
"map-pin-house",
"map-pin-minus",
"map-pin-minus-inside",
"map-pin-off",
"map-pin-pen",
"map-pin-plus",
"map-pin-plus-inside",
"map-pin-search",
"map-pin-x",
"map-pin-x-inside",
"map-pinned",
"map-plus",
"mars",
"mars-stroke",
"martini",
"maximize",
"maximize-2",
"medal",
"megaphone",
"megaphone-off",
"memory-stick",
"menu",
"merge",
"message-circle",
"message-circle-check",
"message-circle-code",
"message-circle-dashed",
"message-circle-dashed-check",
"message-circle-heart",
"message-circle-more",
"message-circle-off",
"message-circle-plus",
"message-circle-question-mark",
"message-circle-reply",
"message-circle-warning",
"message-circle-x",
"message-square",
"message-square-check",
"message-square-code",
"message-square-dashed",
"message-square-diff",
"message-square-dot",
"message-square-heart",
"message-square-lock",
"message-square-more",
"message-square-off",
"message-square-plus",
"message-square-quote",
"message-square-reply",
"message-square-share",
"message-square-text",
"message-square-warning",
"message-square-x",
"messages-circle",
"messages-square",
"metronome",
"mic",
"mic-audio-lines",
"mic-off",
"mic-signal",
"mic-vocal",
"microchip",
"microscope",
"microwave",
"midi-port",
"milestone",
"milk",
"milk-off",
"minimize",
"minimize-2",
"minus",
"mirror-rectangular",
"mirror-round",
"monitor",
"monitor-check",
"monitor-cloud",
"monitor-cog",
"monitor-dot",
"monitor-down",
"monitor-off",
"monitor-pause",
"monitor-pc",
"monitor-play",
"monitor-smartphone",
"monitor-speaker",
"monitor-stop",
"monitor-up",
"monitor-x",
"moon",
"moon-star",
"mop",
"mop-sparkles",
"mosque",
"motorbike",
"mountain",
"mountain-snow",
"mouse",
"mouse-left",
"mouse-off",
"mouse-pointer",
"mouse-pointer-2",
"mouse-pointer-2-off",
"mouse-pointer-ban",
"mouse-pointer-click",
"mouse-right",
"mouth",
"mouth-off",
"move",
"move-3d",
"move-diagonal",
"move-diagonal-2",
"move-down",
"move-down-left",
"move-down-right",
"move-horizontal",
"move-left",
"move-right",
"move-up",
"move-up-left",
"move-up-right",
"move-vertical",
"music",
"music-2",
"music-3",
"music-4",
"navigation",
"navigation-2",
"navigation-2-off",
"navigation-off",
"nepali-rupee",
"network",
"newspaper",
"nfc",
"non-binary",
"notebook",
"notebook-dot",
"notebook-pen",
"notebook-tabs",
"notebook-text",
"notepad-text",
"notepad-text-dashed",
"nut",
"nut-off",
"octagon",
"octagon-alert",
"octagon-minus",
"octagon-pause",
"octagon-x",
"omega",
"option",
"orbit",
"origami",
"package",
"package-2",
"package-check",
"package-minus",
"package-open",
"package-plus",
"package-search",
"package-x",
"paint-bucket",
"paint-roller",
"paintbrush",
"paintbrush-vertical",
"palette",
"panda",
"panel-bottom",
"panel-bottom-close",
"panel-bottom-dashed",
"panel-bottom-open",
"panel-left",
"panel-left-close",
"panel-left-dashed",
"panel-left-open",
"panel-left-right-dashed",
"panel-right",
"panel-right-close",
"panel-right-dashed",
"panel-right-open",
"panel-top",
"panel-top-bottom-dashed",
"panel-top-close",
"panel-top-dashed",
"panel-top-open",
"panels-left-bottom",
"panels-right-bottom",
"panels-top-left",
"paper-bag",
"paperclip",
"parasol",
"parentheses",
"park",
"parking-meter",
"party-popper",
"pause",
"paw-print",
"pc-case",
"pen",
"pen-line",
"pen-off",
"pen-tool",
"pencil",
"pencil-line",
"pencil-off",
"pencil-ruler",
"pencil-sparkles",
"pentagon",
"percent",
"person-standing",
"phi",
"philippine-peso",
"phone",
"phone-call",
"phone-forwarded",
"phone-incoming",
"phone-missed",
"phone-off",
"phone-outgoing",
"pi",
"piano",
"pickaxe",
"picture-in-picture",
"picture-in-picture-2",
"piggy-bank",
"pilcrow",
"pilcrow-left",
"pilcrow-right",
"pill",
"pill-bottle",
"pin",
"pin-off",
"pipette",
"pizza",
"plane",
"plane-landing",
"plane-takeoff",
"plant-pot",
"play",
"play-off",
"playing-card",
"playing-cards",
"playing-cards-fan",
"plug",
"plug-2",
"plug-zap",
"plus",
"pocket-knife",
"podium",
"pointer",
"pointer-off",
"popcorn",
"popsicle",
"pound-sterling",
"power",
"power-off",
"presentation",
"printer",
"printer-check",
"printer-x",
"projector",
"proportions",
"puzzle",
"pyramid",
"qr-code",
"quote",
"rabbit",
"radar",
"radiation",
"radical",
"radio",
"radio-off",
"radio-receiver",
"radio-tower",
"radius",
"rainbow",
"rat",
"ratio",
"receipt",
"receipt-cent",
"receipt-euro",
"receipt-indian-rupee",
"receipt-japanese-yen",
"receipt-pound-sterling",
"receipt-russian-ruble",
"receipt-swiss-franc",
"receipt-text",
"receipt-turkish-lira",
"rectangle-circle",
"rectangle-ellipsis",
"rectangle-goggles",
"rectangle-horizontal",
"rectangle-vertical",
"recycle",
"redo",
"redo-2",
"redo-dot",
"refresh-ccw",
"refresh-ccw-dot",
"refresh-cw",
"refresh-cw-off",
"refrigerator",
"regex",
"remove-formatting",
"repeat",
"repeat-1",
"repeat-2",
"repeat-off",
"replace",
"replace-all",
"reply",
"reply-all",
"rewind",
"ribbon",
"road",
"robot-arm",
"robot-vacuum",
"rocket",
"rocking-chair",
"roller-coaster",
"rose",
"rotate-3d",
"rotate-ccw",
"rotate-ccw-clock",
"rotate-ccw-key",
"rotate-ccw-square",
"rotate-cw",
"rotate-cw-clock",
"rotate-cw-fading-clock",
"rotate-cw-square",
"route",
"route-off",
"router",
"rows-2",
"rows-3",
"rows-4",
"rss",
"ruler",
"ruler-dimension-line",
"russian-ruble",
"sailboat",
"salad",
"sandwich",
"satellite",
"satellite-dish",
"saudi-riyal",
"save",
"save-all",
"save-check",
"save-off",
"save-pen",
"save-plus",
"scale",
"scale-3d",
"scaling",
"scan",
"scan-barcode",
"scan-box",
"scan-eye",
"scan-face",
"scan-heart",
"scan-line",
"scan-qr-code",
"scan-search",
"scan-square",
"scan-text",
"school",
"scissors",
"scissors-line-dashed",
"scooter",
"screen-share",
"screen-share-off",
"scroll",
"scroll-text",
"search",
"search-alert",
"search-check",
"search-code",
"search-slash",
"search-x",
"section",
"send",
"send-horizontal",
"send-to-back",
"separator-horizontal",
"separator-vertical",
"server",
"server-cog",
"server-crash",
"server-off",
"server-plus",
"settings",
"settings-2",
"shapes",
"share",
"share-2",
"sheet",
"shell",
"shelving-unit",
"shield",
"shield-alert",
"shield-ban",
"shield-check",
"shield-cog",
"shield-cog-corner",
"shield-ellipsis",
"shield-half",
"shield-keyhole",
"shield-lock",
"shield-minus",
"shield-off",
"shield-plus",
"shield-question-mark",
"shield-user",
"shield-x",
"ship",
"ship-cargo",
"ship-wheel",
"shirt",
"shopping-bag",
"shopping-basket",
"shopping-cart",
"shopping-cart-minus",
"shopping-cart-plus",
"shovel",
"shower-head",
"shredder",
"shrimp",
"shrimp-off",
"shrink",
"shrub",
"shuffle",
"sigma",
"signal",
"signal-high",
"signal-low",
"signal-medium",
"signal-zero",
"signature",
"signpost",
"signpost-big",
"siren",
"skip-back",
"skip-forward",
"skull",
"slash",
"slice",
"sliders-horizontal",
"sliders-vertical",
"smartphone",
"smartphone-charging",
"smartphone-nfc",
"snail",
"snowflake",
"soap-dispenser-droplet",
"sofa",
"solar-panel",
"soup",
"space",
"spade",
"sparkle",
"sparkles",
"speaker",
"speech",
"spell-check",
"spell-check-2",
"spline",
"spline-pointer",
"split",
"spool",
"sport-shoe",
"spotlight",
"spray-can",
"sprout",
"square",
"square-activity",
"square-arrow-down",
"square-arrow-down-left",
"square-arrow-down-right",
"square-arrow-left",
"square-arrow-out-down-left",
"square-arrow-out-down-right",
"square-arrow-out-up-left",
"square-arrow-out-up-right",
"square-arrow-right",
"square-arrow-right-enter",
"square-arrow-right-exit",
"square-arrow-up",
"square-arrow-up-left",
"square-arrow-up-right",
"square-asterisk",
"square-bookmark",
"square-bottom-dashed-scissors",
"square-centerline-dashed-horizontal",
"square-centerline-dashed-vertical",
"square-chart-gantt",
"square-check",
"square-check-big",
"square-chevron-down",
"square-chevron-left",
"square-chevron-right",
"square-chevron-up",
"square-code",
"square-dashed",
"square-dashed-bottom",
"square-dashed-bottom-code",
"square-dashed-kanban",
"square-dashed-mouse-pointer",
"square-dashed-plus",
"square-dashed-text",
"square-dashed-top-solid",
"square-dashed-x",
"square-dashed-x-corner",
"square-dimensions",
"square-divide",
"square-dot",
"square-equal",
"square-exclamation-point",
"square-function",
"square-kanban",
"square-library",
"square-m",
"square-menu",
"square-minus",
"square-mouse-pointer",
"square-off",
"square-parking",
"square-parking-off",
"square-pause",
"square-pen",
"square-percent",
"square-pi",
"square-pilcrow",
"square-play",
"square-plus",
"square-power",
"square-radical",
"square-round-corner",
"square-scissors",
"square-sigma",
"square-slash",
"square-split-horizontal",
"square-split-vertical",
"square-square",
"square-stack",
"square-star",
"square-stop",
"square-terminal",
"square-text",
"square-user",
"square-user-round",
"square-x",
"squares-exclude",
"squares-intersect",
"squares-subtract",
"squares-unite",
"squircle",
"squircle-dashed",
"squirrel",
"stamp",
"star",
"star-check",
"star-half",
"star-minus",
"star-off",
"star-plus",
"star-x",
"step-back",
"step-forward",
"stethoscope",
"sticker",
"sticky-note",
"sticky-note-check",
"sticky-note-minus",
"sticky-note-off",
"sticky-note-plus",
"sticky-note-x",
"sticky-notes",
"stone",
"store",
"stretch-horizontal",
"stretch-vertical",
"strikethrough",
"subscript",
"summary",
"sun",
"sun-dim",
"sun-medium",
"sun-moon",
"sun-snow",
"sunrise",
"sunset",
"superscript",
"swatch-book",
"swiss-franc",
"switch-camera",
"sword",
"swords",
"syringe",
"table",
"table-2",
"table-cells-merge",
"table-cells-split",
"table-columns-split",
"table-of-contents",
"table-properties",
"table-rows-split",
"tablet",
"tablet-smartphone",
"tablets",
"tag",
"tag-plus",
"tag-x",
"tags",
"tally-1",
"tally-2",
"tally-3",
"tally-4",
"tally-5",
"tangent",
"target",
"telescope",
"tent",
"tent-tree",
"terminal",
"test-tube",
"test-tube-diagonal",
"test-tubes",
"text-align-center",
"text-align-end",
"text-align-justify",
"text-align-start",
"text-cursor",
"text-cursor-input",
"text-initial",
"text-quote",
"text-search",
"text-wrap",
"theater",
"thermometer",
"thermometer-snowflake",
"thermometer-sun",
"thumbs-down",
"thumbs-up",
"tic-tac-toe",
"ticket",
"ticket-check",
"ticket-minus",
"ticket-percent",
"ticket-plus",
"ticket-slash",
"ticket-x",
"tickets",
"tickets-plane",
"timeline",
"timer",
"timer-off",
"timer-reset",
"toggle-left",
"toggle-right",
"toilet",
"tool-case",
"toolbox",
"toothbrush",
"toothbrush-sparkles",
"tornado",
"torus",
"touchpad",
"touchpad-off",
"towel-rack",
"tower-control",
"toy-brick",
"tractor",
"traffic-cone",
"trailer",
"train-front",
"train-front-tunnel",
"train-track",
"tram-front",
"transgender",
"trash",
"trash-off",
"tree-deciduous",
"tree-palm",
"tree-pine",
"trees",
"trending-down",
"trending-up",
"trending-up-down",
"triangle",
"triangle-alert",
"triangle-dashed",
"triangle-right",
"triangles-centerline-dashed-horizontal",
"triangles-centerline-dashed-vertical",
"trophy",
"truck",
"truck-electric",
"tube-lotion",
"turkish-lira",
"turntable",
"turtle",
"tv",
"tv-minimal",
"tv-minimal-play",
"type",
"type-outline",
"umbrella",
"umbrella-off",
"underline",
"undo",
"undo-2",
"undo-dot",
"unfold-horizontal",
"unfold-vertical",
"ungroup",
"university",
"unlink",
"unlink-2",
"unplug",
"upload",
"usb",
"usb-c-port",
"user",
"user-check",
"user-cog",
"user-group",
"user-key",
"user-lock",
"user-minus",
"user-pen",
"user-plus",
"user-round",
"user-round-arrow-left",
"user-round-check",
"user-round-cog",
"user-round-group",
"user-round-key",
"user-round-minus",
"user-round-pen",
"user-round-plus",
"user-round-search",
"user-round-x",
"user-search",
"user-shield",
"user-star",
"user-x",
"users",
"users-round",
"utensils",
"utensils-crossed",
"utility-pole",
"van",
"variable",
"vault",
"vector-polygon",
"vector-square",
"vegan",
"venetian-mask",
"venus",
"venus-and-mars",
"vibrate",
"vibrate-off",
"video",
"video-off",
"videotape",
"view",
"virus",
"virus-off",
"voicemail",
"volleyball",
"volume",
"volume-1",
"volume-2",
"volume-off",
"volume-x",
"vote",
"wallet",
"wallet-cards",
"wallet-minimal",
"wallpaper",
"wand",
"wand-sparkles",
"warehouse",
"washing-machine",
"watch",
"waves-arrow-down",
"waves-arrow-up",
"waves-horizontal",
"waves-ladder",
"waves-vertical",
"waypoints",
"webcam",
"webcam-off",
"webhook",
"webhook-off",
"weight",
"weight-tilde",
"wheat",
"wheat-off",
"whistle",
"whole-word",
"wifi",
"wifi-cog",
"wifi-high",
"wifi-low",
"wifi-off",
"wifi-pen",
"wifi-sync",
"wifi-zero",
"wind",
"wind-arrow-down",
"wine",
"wine-off",
"workflow",
"worm",
"wrench",
"wrench-off",
"x",
"x-line-top",
"zap",
"zap-off",
"zodiac-aquarius",
"zodiac-aries",
"zodiac-cancer",
"zodiac-capricorn",
"zodiac-gemini",
"zodiac-leo",
"zodiac-libra",
"zodiac-ophiuchus",
"zodiac-pisces",
"zodiac-sagittarius",
"zodiac-scorpio",
"zodiac-taurus",
"zodiac-virgo",
"zoom-in",
"zoom-out",
]
Every icon name bundled with PythonNative (Lucide).
Used for editor completion and type checking of pn.Icon(name).
module-attribute
¶
Every bundled icon is drawn on a 24 by 24 grid.
module-attribute
¶
The wire form of a tab bar icon: {"shapes": [...], "view_box": ...} or {"uri": ...}.
cached
¶
The flattened shape records that draw name.
The records are what an Svg element carries in its shapes
prop: path shapes as {"kind": "path", "d": ...}, and the other
basic shapes with their geometry. Paint is left to the Svg root.
Raises:
| Type | Description |
|---|---|
KeyError
|
If the icon doesn't exist. The message lists close matches. |
Icon(
name: IconName,
*,
size: float = 24,
color: Optional[Color] = None,
stroke_width: float = 2,
fill: Optional[Color] = None,
style: StyleProp = None,
accessibility_label: Optional[str] = None,
test_id: Optional[str] = None,
key: Optional[str] = None
) -> Element
Render a bundled vector icon.
Icons are stroke based: color sets the stroke, and fill (off
by default) fills the enclosed areas, which is how a "solid" variant
is made.
Parameters:
| Name | Type | Description | Default |
|---|---|---|---|
name
|
IconName
|
A Lucide icon name such as |
required |
size
|
float
|
Width and height in logical points. |
24
|
color
|
Optional[Color]
|
Stroke color. Defaults to the platform label color. |
None
|
stroke_width
|
float
|
Stroke width on the 24-unit grid ( |
2
|
fill
|
Optional[Color]
|
Optional fill color for a solid look. |
None
|
style
|
StyleProp
|
Extra styles (margins, opacity, transforms). |
None
|
accessibility_label
|
Optional[str]
|
Spoken description. Icons without a label are hidden from assistive technology, since a decorative icon next to text shouldn't be read twice. |
None
|
test_id
|
Optional[str]
|
Stable identifier for UI tests. |
None
|
key
|
Optional[str]
|
Stable identity for keyed reconciliation. |
None
|
Returns:
| Type | Description |
|---|---|
Element
|
An |
Raises:
| Type | Description |
|---|---|
KeyError
|
If |
Resolve a tab_bar_icon value into its wire record.
Parameters:
| Name | Type | Description | Default |
|---|---|---|---|
icon
|
Any
|
An icon name or an |
required |
Raises:
| Type | Description |
|---|---|
TypeError
|
For other values, including the removed
|
KeyError
|
If a name isn't a bundled icon. |
SVG shapes and parsing¶
Vector shapes for Svg, plus an SVG document loader.
Shapes are plain frozen dataclasses, not elements: an Svg view draws
all of its shapes itself (one native view, one layout node), the same way
Text flattens rich spans instead of nesting child views. Build them
with the constructors here and pass them to pn.Svg:
import pythonnative as pn
from pythonnative import svg
pn.Svg(
svg.Circle(cx=12, cy=12, r=10, fill="#0EA5E9"),
svg.Path(d="M8 12h8M12 8v8", stroke="white", stroke_width=2),
view_box="0 0 24 24",
style=pn.style(width=48, height=48),
)
Coordinates are in view_box units and are scaled into the view's
frame according to preserve_aspect_ratio. Paint attributes left as
None inherit from the enclosing G and then
from the Svg root, following SVG's cascade (fill defaults to black,
stroke to none).
parse and load
turn an SVG document's basic shapes into a ready-to-render Svg
element, which is enough for exported icons and simple illustrations.
Classes:
| Name | Description |
|---|---|
SvgShape |
One drawable shape as it crosses the bridge. |
Path |
A path described by SVG path data ( |
Circle |
A circle centered at |
Ellipse |
An ellipse centered at |
Rect |
A rectangle with optional rounded corners ( |
Line |
A straight line from |
Polyline |
An open series of connected points. |
Polygon |
A closed series of connected points (see |
G |
A group: its paint attributes cascade to children and its |
Functions:
| Name | Description |
|---|---|
flatten |
Flatten shapes and groups into the wire list of |
parse_view_box |
Parse |
parse |
Turn an SVG document into an |
load |
Load an SVG file and return an |
Attributes:
| Name | Type | Description |
|---|---|---|
Shape |
Anything |
module-attribute
¶
Anything Svg accepts as a child.
dataclass
¶
SvgShape(
kind: Literal[
"path",
"circle",
"ellipse",
"rect",
"line",
"polyline",
"polygon",
],
d: Optional[str] = None,
cx: Optional[float] = None,
cy: Optional[float] = None,
r: Optional[float] = None,
rx: Optional[float] = None,
ry: Optional[float] = None,
x: Optional[float] = None,
y: Optional[float] = None,
width: Optional[float] = None,
height: Optional[float] = None,
x1: Optional[float] = None,
y1: Optional[float] = None,
x2: Optional[float] = None,
y2: Optional[float] = None,
points: Optional[str] = None,
fill: Optional[Color] = None,
fill_opacity: Optional[float] = None,
fill_rule: Optional[FillRule] = None,
stroke: Optional[Color] = None,
stroke_width: Optional[float] = None,
stroke_opacity: Optional[float] = None,
stroke_linecap: Optional[LineCap] = None,
stroke_linejoin: Optional[LineJoin] = None,
stroke_dasharray: Optional[List[float]] = None,
opacity: Optional[float] = None,
transform: Optional[str] = None,
)
One drawable shape as it crosses the bridge.
Geometry fields that don't apply to kind stay None. Paint
fields that are None inherit from the Svg root.
dataclass
¶
Path(
*,
fill: Optional[Color] = None,
fill_opacity: Optional[float] = None,
fill_rule: Optional[FillRule] = None,
stroke: Optional[Color] = None,
stroke_width: Optional[float] = None,
stroke_opacity: Optional[float] = None,
stroke_linecap: Optional[LineCap] = None,
stroke_linejoin: Optional[LineJoin] = None,
stroke_dasharray: Optional[Sequence[float]] = None,
opacity: Optional[float] = None,
transform: Optional[str] = None,
d: str
)
Bases: _Paint
A path described by SVG path data (M L H V C S Q T A Z and lowercase forms).
Attributes:
| Name | Type | Description |
|---|---|---|
d |
str
|
The path data string. |
dataclass
¶
Circle(
*,
fill: Optional[Color] = None,
fill_opacity: Optional[float] = None,
fill_rule: Optional[FillRule] = None,
stroke: Optional[Color] = None,
stroke_width: Optional[float] = None,
stroke_opacity: Optional[float] = None,
stroke_linecap: Optional[LineCap] = None,
stroke_linejoin: Optional[LineJoin] = None,
stroke_dasharray: Optional[Sequence[float]] = None,
opacity: Optional[float] = None,
transform: Optional[str] = None,
cx: float,
cy: float,
r: float
)
Bases: _Paint
A circle centered at (cx, cy) with radius r.
dataclass
¶
Ellipse(
*,
fill: Optional[Color] = None,
fill_opacity: Optional[float] = None,
fill_rule: Optional[FillRule] = None,
stroke: Optional[Color] = None,
stroke_width: Optional[float] = None,
stroke_opacity: Optional[float] = None,
stroke_linecap: Optional[LineCap] = None,
stroke_linejoin: Optional[LineJoin] = None,
stroke_dasharray: Optional[Sequence[float]] = None,
opacity: Optional[float] = None,
transform: Optional[str] = None,
cx: float,
cy: float,
rx: float,
ry: float
)
Bases: _Paint
An ellipse centered at (cx, cy) with radii rx and ry.
dataclass
¶
Rect(
*,
fill: Optional[Color] = None,
fill_opacity: Optional[float] = None,
fill_rule: Optional[FillRule] = None,
stroke: Optional[Color] = None,
stroke_width: Optional[float] = None,
stroke_opacity: Optional[float] = None,
stroke_linecap: Optional[LineCap] = None,
stroke_linejoin: Optional[LineJoin] = None,
stroke_dasharray: Optional[Sequence[float]] = None,
opacity: Optional[float] = None,
transform: Optional[str] = None,
x: float = 0.0,
y: float = 0.0,
width: float,
height: float,
rx: Optional[float] = None,
ry: Optional[float] = None
)
Bases: _Paint
A rectangle with optional rounded corners (rx/ry).
dataclass
¶
Line(
*,
fill: Optional[Color] = None,
fill_opacity: Optional[float] = None,
fill_rule: Optional[FillRule] = None,
stroke: Optional[Color] = None,
stroke_width: Optional[float] = None,
stroke_opacity: Optional[float] = None,
stroke_linecap: Optional[LineCap] = None,
stroke_linejoin: Optional[LineJoin] = None,
stroke_dasharray: Optional[Sequence[float]] = None,
opacity: Optional[float] = None,
transform: Optional[str] = None,
x1: float,
y1: float,
x2: float,
y2: float
)
Bases: _Paint
A straight line from (x1, y1) to (x2, y2).
dataclass
¶
Polyline(
*,
fill: Optional[Color] = None,
fill_opacity: Optional[float] = None,
fill_rule: Optional[FillRule] = None,
stroke: Optional[Color] = None,
stroke_width: Optional[float] = None,
stroke_opacity: Optional[float] = None,
stroke_linecap: Optional[LineCap] = None,
stroke_linejoin: Optional[LineJoin] = None,
stroke_dasharray: Optional[Sequence[float]] = None,
opacity: Optional[float] = None,
transform: Optional[str] = None,
points: Union[str, Sequence[Tuple[float, float]]]
)
dataclass
¶
Polygon(
*,
fill: Optional[Color] = None,
fill_opacity: Optional[float] = None,
fill_rule: Optional[FillRule] = None,
stroke: Optional[Color] = None,
stroke_width: Optional[float] = None,
stroke_opacity: Optional[float] = None,
stroke_linecap: Optional[LineCap] = None,
stroke_linejoin: Optional[LineJoin] = None,
stroke_dasharray: Optional[Sequence[float]] = None,
opacity: Optional[float] = None,
transform: Optional[str] = None,
points: Union[str, Sequence[Tuple[float, float]]]
)
G(*children: 'Shape', **paint: Any)
Bases: _Paint
A group: its paint attributes cascade to children and its transform is applied first.
Groups are flattened before crossing the bridge; they exist so a
subtree can share a fill or a transform, exactly as <g> does.
Example
flatten(
shapes: Iterable[Any],
inherited: Optional[Dict[str, Any]] = None,
) -> List[Dict[str, Any]]
Flatten shapes and groups into the wire list of SvgShape dicts.
Group paint cascades to children that leave the attribute None;
group transforms are prepended to child transforms so the child is
transformed first, as in SVG.
Raises:
| Type | Description |
|---|---|
TypeError
|
If an item isn't a shape or group. |
Parse "minx miny width height" (commas allowed); None when malformed.
Turn an SVG document into an Svg element.
Supported: <path>, <circle>, <ellipse>, <rect>,
<line>, <polyline>, <polygon>, and <g> (with paint
and transform), the presentation attributes listed on
Path, inline style="..." declarations,
and the root viewBox, width, height, fill, stroke
and stroke-* attributes. Everything else is ignored.
Parameters:
| Name | Type | Description | Default |
|---|---|---|---|
markup
|
str
|
The SVG source text. |
required |
**svg_props
|
Any
|
Extra keyword arguments for |
{}
|
Raises:
| Type | Description |
|---|---|
ValueError
|
If |
Load an SVG file and return an Svg element.
Parameters:
| Name | Type | Description | Default |
|---|---|---|---|
source
|
Any
|
An |
required |
**svg_props
|
Any
|
Extra keyword arguments for |
{}
|
Assets are parsed once per asset generation and cached, so calling
load on every render is cheap. Files given by path are re-read
each call.
Raises:
| Type | Description |
|---|---|
FileNotFoundError
|
If the asset or file can't be read. |
ValueError
|
If the content isn't a valid SVG document. |