Place editable SVG icons directly on the Penpot canvas.
Connect only when you are ready, search the live IconSearch catalog, tune size and color, then insert a sanitized SVG as a native, selected Penpot vector group.
lucide:house · editable SVG · 96 px · #111827A focused IconSearch experience for Penpot.
The interface keeps discovery, inspection, and the final handoff close together while using the same live catalog as the website.
Live catalog search
Browse the current IconSearch catalog with focused library and style filters instead of shipping a stale icon bundle.
Style before insertion
Choose a precise size and color while keeping a large preview visible beside the search results.
Native Penpot vectors
Create an editable SVG group at the viewport center and select it immediately for the next design action.
Hardened SVG pipeline
Oversized payloads, scripts, external resources, unsafe links, embedded images, and non-fragment URL references are rejected.
From local setup to a real icon.
Install the hosted or local manifest URL in Penpot
Open IconSearch and approve account pairing
Search, select, and style an icon
Insert one editable vector group onto the canvas
npm run test:penpot
npm run dev
# Install this manifest in Penpot:
http://localhost:3000/penpot/manifest.local.jsonProduction package ready for hosted verification.
Manifest v2, minimal permissions, secure pairing, bounded SVG sanitization, single-message insertion, responsive UI, automated checks, and the production build all pass. Deploy the site and install the production manifest once before final Penpot Hub review.