DoubleShore Icon Picker

A filesystem-driven SVG icon-picker property editor for Umbraco 17. Point it at a folder of your own SVGs — organised by style and group — and editors can search and pick them in the backoffice; the chosen icon is rendered inline so it inherits currentColor.

The package ships without any icons active on disk. You either install one of the bundled starter sets with one click (Lucide — ISC, Tabler — MIT; both redistribution-safe) or bring your own SVGs (see Adding icons below). This keeps the package itself free of icon-library redistribution restrictions while still being useful out of the box.

Features

• Property editor that stores the selected icon name (+ style) and renders the SVG inline.
• Icons discovered from disk: icons/{Style}/ and icons/{Style}/{Group}/. No rebuild required to use new icons at runtime once they are on disk (the picker re-scans).
• Search across one style, several styles, or All.
• Hardcoded stroke/fill hex colours are rewritten to currentColor so icons theme with CSS.
• Backoffice upload/manage UI (create groups, upload, delete) for editors, behind backoffice authentication. SVGs are sanitised on upload (script tags, event handlers and javascript: URLs are stripped).

Requirements

• Umbraco 17 (new backoffice) on .NET 10.

Installation

dotnet add package DoubleShore.Kit.IconPicker

The property editor and its backoffice UI register automatically on boot. Create a Data Type based on Icon Picker, then add it to a document type.

Starter icon sets (one-click install)

The package bundles a few permissively-licensed icon sets so you can get going without sourcing your own artwork. They are embedded in the package and only written to disk when you install them — nothing ships loose in your project until you opt in.

• Lucide (~2000 icons, ISC) → installs into a Lucide style.
• Tabler Outline (~5000 icons, MIT) → Tabler / Outline.
• Tabler Filled (~1000 icons, MIT) → Tabler / Filled.

Open the icon picker as an administrator and use the Install starter icons button (next to the search box). Installing copies the chosen set into your writable icons folder (skipping any files that already exist), and each installed set carries its upstream LICENSE.txt. Installing is admin-only; other editors can then pick from the icons normally.

See THIRD-PARTY-NOTICES.txt for the bundled sets' licences.

Adding icons

The picker reads SVGs from, in your site:

wwwroot/App_Plugins/DoubleShore.Kit.IconPicker/icons/{Style}/{Group}/*.svg

• {Style} is the top-level folder (e.g. Outline, Solid); {Group} is an optional subfolder used to group icons within a style. SVGs placed directly under a style belong to a default group named after that style.
• Each SVG should be a single, self-contained <svg …>…</svg> element. Use currentColor (or a hardcoded hex, which the editor will convert) so the icon picks up the surrounding text colour.
• You can also add icons from the backoffice via the picker's upload UI (requires a signed-in backoffice user).

License

MIT — see the repository LICENSE. The optional starter sets carry their own licences (Lucide — ISC, Tabler — MIT; see THIRD-PARTY-NOTICES.txt), included alongside the icons when installed. Any other icons you add carry whatever licence you bring.