diff --git a/.changeset/sparkly-hands-enjoy.md b/.changeset/sparkly-hands-enjoy.md
new file mode 100644
index 000000000..181a2771a
--- /dev/null
+++ b/.changeset/sparkly-hands-enjoy.md
@@ -0,0 +1,5 @@
+---
+'@fuzdev/fuz_ui': minor
+---
+
+feat: add svg icons
diff --git a/src/lib/icons.ts b/src/lib/icons.ts
new file mode 100644
index 000000000..cd72274f4
--- /dev/null
+++ b/src/lib/icons.ts
@@ -0,0 +1,612 @@
+import type {SvgData} from './Svg.svelte';
+
+// SVG icon data for replacing character glyphs with scalable vector icons.
+// Each export uses the `icon_` prefix and conforms to `SvgData`.
+// Default viewBox is "0 0 100 100".
+
+// --- Status ---
+
+export const icon_unknown = {
+ label: 'unknown, double question mark',
+ paths: [
+ {
+ d: 'M5 30a20 20 0 0 1 20-22 20 20 0 0 1 20 22c0 10-7 14-9 20l0 10-14 0 0-10c0-8 7-12 7-20a5 5 0 0 0-5-7 5 5 0 0 0-5 7zm16 46a8 8 0 1 0 16 0 8 8 0 0 0-16 0zM55 30a20 20 0 0 1 20-22 20 20 0 0 1 20 22c0 10-7 14-9 20l0 10-14 0 0-10c0-8 7-12 7-20a5 5 0 0 0-5-7 5 5 0 0 0-5 7zm16 46a8 8 0 1 0 16 0 8 8 0 0 0-16 0z',
+ },
+ ],
+} satisfies SvgData;
+
+export const icon_important = {
+ label: 'important, question and exclamation',
+ paths: [
+ {
+ d: 'M5 30a20 20 0 0 1 20-22 20 20 0 0 1 20 22c0 10-7 14-9 20l0 10-14 0 0-10c0-8 7-12 7-20a5 5 0 0 0-5-7 5 5 0 0 0-5 7zm16 46a8 8 0 1 0 16 0 8 8 0 0 0-16 0zM63 8L79 8 76 56 66 56zM63 76a8 8 0 1 0 16 0 8 8 0 0 0-16 0z',
+ },
+ ],
+} satisfies SvgData;
+
+export const icon_info = {
+ label: 'info circle',
+ paths: [
+ {
+ d: 'M50 5a45 45 0 1 0 0 90 45 45 0 0 0 0-90zm0 10a35 35 0 1 1 0 70 35 35 0 0 1 0-70zM47 30h6a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2h-6a2 2 0 0 1-2-2v-6a2 2 0 0 1 2-2zM47 50h6a2 2 0 0 1 2 2v26a2 2 0 0 1-2 2h-6a2 2 0 0 1-2-2v-26a2 2 0 0 1 2-2z',
+ },
+ ],
+} satisfies SvgData;
+
+// --- Actions ---
+
+export const icon_add = {
+ label: 'add, plus',
+ paths: [{d: 'M45 15L55 15 58 42 85 45 85 55 58 58 55 85 45 85 42 58 15 55 15 45 42 42z'}],
+} satisfies SvgData;
+
+export const icon_remove = {
+ label: 'remove, x mark',
+ paths: [
+ {
+ d: 'M26.5 19.4L19.4 26.5 40 50 19.4 73.5 26.5 80.6 50 60 73.5 80.6 80.6 73.5 60 50 80.6 26.5 73.5 19.4 50 40z',
+ },
+ ],
+} satisfies SvgData;
+
+export const icon_delete = {
+ label: 'delete, x in concave frame',
+ paths: [
+ {
+ d: 'M5 5Q50 18 95 5Q82 50 95 95Q50 82 5 95Q18 50 5 5zM18 18Q28 50 18 82Q50 72 82 82Q72 50 82 18Q50 28 18 18zM29 34l5-5 16 13 16-13 5 5-13 16 13 16-5 5-16-13-16 13-5-5 13-16-13-16z',
+ },
+ ],
+} satisfies SvgData;
+
+export const icon_clear = {
+ label: 'clear, backspace',
+ paths: [
+ {
+ d: 'M35 15l-25 35 25 35h55v-70zm9 21l5-5 14 11 14-11 5 5-11 14 11 14-5 5-14-11-14 11-5-5 11-14-11-14z',
+ },
+ ],
+} satisfies SvgData;
+
+export const icon_restore = {
+ label: 'restore, redo arrow',
+ paths: [
+ {
+ d: 'M65 20l20 20-20 20v-12a30 30 0 0 0-30 30h-12a42 42 0 0 1 42-42z',
+ },
+ ],
+} satisfies SvgData;
+
+export const icon_cancel = {
+ label: 'cancel, circle with line',
+ paths: [
+ {
+ d: 'M50 5a45 45 0 1 0 0 90 45 45 0 0 0 0-90zm0 10a35 35 0 1 1 0 70 35 35 0 1 1 0-70zM28 35l7-7 37 37-7 7z',
+ },
+ ],
+} satisfies SvgData;
+
+export const icon_drag = {
+ label: 'drag handle, three horizontal lines',
+ paths: [{d: 'M20 25h60v8h-60zm0 17q30-1 60 0v8h-60zm0 17h60v8h-60z'}],
+} satisfies SvgData;
+
+export const icon_copy = {
+ label: 'copy, overlapping squares',
+ paths: [{d: 'M10 30h45v45h-45zm7 7v31h31v-31z'}, {d: 'M30 10h45v45h-45zm7 7v31h31v-31z'}],
+} satisfies SvgData;
+
+export const icon_paste = {
+ label: 'paste, clipboard',
+ paths: [
+ {
+ d: 'M35 5h30v10h15a5 5 0 0 1 5 5v65a5 5 0 0 1-5 5h-60a5 5 0 0 1-5-5v-65a5 5 0 0 1 5-5h15zm5 5v10h20v-10zm-15 10v60h50v-60h-10v10h-30v-10z',
+ },
+ ],
+} satisfies SvgData;
+
+export const icon_reset = {
+ label: 'reset, undo arrow',
+ paths: [
+ {
+ d: 'M35 20l-20 20 20 20v-12a30 30 0 0 1 30 30h12a42 42 0 0 0-42-42z',
+ },
+ ],
+} satisfies SvgData;
+
+export const icon_refresh = {
+ label: 'refresh, circular arrow',
+ paths: [{d: 'M50 15a35 35 0 1 0 25 10l-7 7a24 24 0 1 1-18-6v10l17-17-17-17v13z'}],
+} satisfies SvgData;
+
+export const icon_connect = {
+ label: 'connect, link',
+ paths: [
+ {
+ d: 'M30 40a15 15 0 0 0-15 15 15 15 0 0 0 15 15h10v10h-10a25 25 0 0 1-25-25 25 25 0 0 1 25-25h10v10zm30-10h10a25 25 0 0 1 25 25 25 25 0 0 1-25 25h-10v-10h10a15 15 0 0 0 15-15 15 15 0 0 0-15-15h-10zm-25 20h30v10h-30z',
+ },
+ ],
+} satisfies SvgData;
+
+export const icon_disconnect = {
+ label: 'disconnect, broken link',
+ paths: [
+ {
+ d: 'M30 40a15 15 0 0 0-15 15 15 15 0 0 0 15 15h10v10h-10a25 25 0 0 1-25-25 25 25 0 0 1 25-25h10v10zm30-10h10a25 25 0 0 1 25 25 25 25 0 0 1-25 25h-10v-10h10a15 15 0 0 0 15-15 15 15 0 0 0-15-15h-10zM46 48l-4-8h8l4 8zM54 62l4 8h-8l-4-8z',
+ },
+ ],
+} satisfies SvgData;
+
+export const icon_retry = {
+ label: 'retry, counterclockwise arrow',
+ paths: [{d: 'M50 15a35 35 0 1 1-25 10l7 7a24 24 0 1 0 18-6v10l-17-17 17-17v13z'}],
+} satisfies SvgData;
+
+export const icon_placeholder = {
+ label: 'placeholder, return arrow',
+ paths: [{d: 'M75 15v40h-40v15l-25-20 25-20v15h30v-30z'}],
+} satisfies SvgData;
+
+export const icon_send = {
+ label: 'send, paper plane',
+ paths: [{d: 'M10 85l80-35-80-35v27l55 8-55 8z'}],
+} satisfies SvgData;
+
+// --- Media ---
+
+export const icon_play = {
+ label: 'play',
+ paths: [{d: 'M26 10l54 40-55 40z'}],
+} satisfies SvgData;
+
+export const icon_pause = {
+ label: 'pause',
+ paths: [{d: 'M25 15h15v70h-15zm35 1h15v69h-15z'}],
+} satisfies SvgData;
+
+// --- Validation ---
+
+export const icon_checkmark = {
+ label: 'checkmark',
+ paths: [{d: 'M14 55L24 42 42 60Q60 40 78 24L82 22 88 36Q62 52 42 82z'}],
+} satisfies SvgData;
+
+export const icon_checkmark_heavy = {
+ label: 'heavy checkmark',
+ paths: [{d: 'M10 54L22 36 42 56Q60 34 78 18L84 15 92 34Q64 52 42 84z'}],
+} satisfies SvgData;
+
+export const icon_xmark = {
+ label: 'x mark',
+ paths: [
+ {
+ d: 'M27 17L25 20 22 28Q33 39 43 50Q33 61 17 72L14 76 26 83Q37 70 50 57Q63 70 74 83L77 81 81 74Q70 63 57 50Q70 37 83 23L74 17 50 43z',
+ },
+ ],
+} satisfies SvgData;
+
+export const icon_xmark_heavy = {
+ label: 'heavy x mark',
+ paths: [
+ {
+ d: 'M25 12L22 15 17 24Q30 37 40 50Q30 63 12 76L10 80 24 88Q37 74 50 60Q63 74 76 88L79 86 86 76Q73 63 60 50Q73 37 88 21L76 12 50 40z',
+ },
+ ],
+} satisfies SvgData;
+
+// --- Navigation ---
+
+export const icon_download = {
+ label: 'download arrow',
+ paths: [{d: 'M45 10v40h-20l25 30 25-30h-20v-40zm-30 70v10h70v-10z'}],
+} satisfies SvgData;
+
+export const icon_error = {
+ label: 'error, double exclamation',
+ paths: [
+ {
+ d: 'M20 8L36 8 33 56 23 56zM21 70a7 7 0 1 0 14 0 7 7 0 0 0-14 0zM64 8L80 8 77 56 67 56zM65 70a7 7 0 1 0 14 0 7 7 0 0 0-14 0z',
+ },
+ ],
+} satisfies SvgData;
+
+export const icon_chevron_up = {
+ label: 'chevron up',
+ paths: [{d: 'M50 33l35 28-5 7-30-20-30 20-5-7z'}],
+} satisfies SvgData;
+
+export const icon_chevron_right = {
+ label: 'chevron right',
+ paths: [{d: 'M67 50l-28 35-7-5 20-30-20-30 7-5z'}],
+} satisfies SvgData;
+
+export const icon_chevron_down = {
+ label: 'chevron down',
+ paths: [{d: 'M50 67l-35-28 5-7 30 20 30-20 5 7z'}],
+} satisfies SvgData;
+
+export const icon_chevron_left = {
+ label: 'chevron left',
+ paths: [{d: 'M33 50l28-35 7 5-20 30 20 30-7 5z'}],
+} satisfies SvgData;
+
+export const icon_double_chevron_left = {
+ label: 'double chevron left',
+ paths: [
+ {
+ d: 'M15 50l18-28 5 4-12 24 12 24-5 4zm30 0l18-28 5 4-12 24 12 24-5 4z',
+ },
+ ],
+} satisfies SvgData;
+
+export const icon_double_chevron_right = {
+ label: 'double chevron right',
+ paths: [
+ {
+ d: 'M85 50l-18-28-5 4 12 24-12 24 5 4zm-30 0l-18-28-5 4 12 24-12 24 5 4z',
+ },
+ ],
+} satisfies SvgData;
+
+// --- Editing ---
+
+export const icon_edit = {
+ label: 'edit, pencil',
+ paths: [
+ {
+ d: 'M58 14l20 20-45 45-20-20zM13 59L10 82 33 79zM58 14l10-10 20 20-10 10z',
+ },
+ ],
+} satisfies SvgData;
+
+export const icon_sort = {
+ label: 'sort, up and down arrows',
+ paths: [
+ {
+ d: 'M30 40l-20-25h12v-10h16v10h12zm40 20l20 25h-12v10h-16v-10h-12z',
+ },
+ ],
+} satisfies SvgData;
+
+// --- Domain ---
+
+export const icon_chat = {
+ label: 'chat bubble',
+ paths: [
+ {
+ d: 'M15 10Q50 9 85 10a5 5 0 0 1 5 5v50a5 5 0 0 1-5 5h-40l-20 20v-20h-10a5 5 0 0 1-5-5v-50a5 5 0 0 1 5-5zm10 10v40h10v13l12-13h38v-40z',
+ },
+ ],
+} satisfies SvgData;
+
+export const icon_thread = {
+ label: 'thread, broken stacked lines',
+ paths: [
+ {
+ d: 'M15 20h30v10h-30zm40 0h30v10h-30zm-40 20h30v10h-30zm40 0h30v10h-30zm-40 20h30v10h-30zm40 0h30v10h-30z',
+ },
+ ],
+} satisfies SvgData;
+
+export const icon_turn = {
+ label: 'turn, speech bracket',
+ paths: [
+ {
+ d: 'M20 15h60v10h-60zm20 20h40v10h-40zm-20-5v35h10v-30h50v-5z',
+ },
+ ],
+} satisfies SvgData;
+
+export const icon_file = {
+ label: 'file, document',
+ paths: [
+ {
+ d: 'M20 5h40l25 25v60a5 5 0 0 1-5 5h-60a5 5 0 0 1-5-5v-80a5 5 0 0 1 5-5zm5 10v70h50v-50h-20v-20z',
+ },
+ ],
+} satisfies SvgData;
+
+export const icon_list = {
+ label: 'list, bulleted lines',
+ paths: [
+ {
+ d: 'M15 20a4 4 0 1 0 0 8 4 4 0 0 0 0-8zm12 0h58v8h-58zm-12 18a4 4 0 1 0 0 8 4 4 0 0 0 0-8zm12 0h58v8h-58zm-12 18a4 4 0 1 0 0 8 4 4 0 0 0 0-8zm12 0h58v8h-58zm-12 18a4 4 0 1 0 0 8 4 4 0 0 0 0-8zm12 0h58v8h-58z',
+ },
+ ],
+} satisfies SvgData;
+
+export const icon_directory = {
+ label: 'directory, folder',
+ paths: [
+ {
+ d: 'M10 15h30l10 10h40a5 5 0 0 1 5 5v50a5 5 0 0 1-5 5h-80a5 5 0 0 1-5-5v-60a5 5 0 0 1 5-5zm5 10v50h70v-40h-40l-10-10z',
+ },
+ ],
+} satisfies SvgData;
+
+export const icon_create_file = {
+ label: 'create file, document with plus',
+ paths: [
+ {
+ d: 'M20 5h40l25 25v60a5 5 0 0 1-5 5h-60a5 5 0 0 1-5-5v-80a5 5 0 0 1 5-5zm5 10v70h50v-50h-20v-20zm15 30h8l1 9 9 1v8l-9 1-1 9h-8l-1-9-9-1v-8l9-1z',
+ },
+ ],
+} satisfies SvgData;
+
+export const icon_create_directory = {
+ label: 'create directory, folder with plus',
+ paths: [
+ {
+ d: 'M10 15h30l10 10h40a5 5 0 0 1 5 5v50a5 5 0 0 1-5 5h-80a5 5 0 0 1-5-5v-60a5 5 0 0 1 5-5zm5 10v50h70v-40h-40l-10-10zm26 15h8l1 10 10 1v8l-10 1-1 10h-8l-1-10-10-1v-8l10-1z',
+ },
+ ],
+} satisfies SvgData;
+
+export const icon_prompt = {
+ label: 'prompt, chevron with cursor',
+ paths: [{d: 'M8 23l32 27-32 27-3-10 17-17-17-17zm37 42h40v10h-40z'}],
+} satisfies SvgData;
+
+export const icon_part = {
+ label: 'part, dashed vertical line',
+ paths: [
+ {
+ d: 'M45 10h10v15h-10zm0 22h10v15h-10zm0 22h10v15h-10zm0 22h10v15h-10z',
+ },
+ ],
+} satisfies SvgData;
+
+export const icon_provider = {
+ label: 'provider, branching star in circle',
+ paths: [
+ {
+ d: 'M50 5a45 45 0 1 0 0 90 45 45 0 0 0 0-90zm0 10a35 35 0 1 1 0 70 35 35 0 1 1 0-70zM47 25L50 30 53 25 53 46 70 35 67 40 73 41 55 50 73 59 67 60 70 65 53 54 53 75 50 70 47 75 47 54 30 65 33 60 27 59 45 50 27 41 33 40 30 35 47 46z',
+ },
+ ],
+} satisfies SvgData;
+
+export const icon_model = {
+ label: 'model, branching star',
+ paths: [
+ {
+ d: 'M45 12L50 20 55 12 54 43 80 27 76 35 85 36 58 50 85 64 76 65 80 73 54 57 55 88 50 80 45 88 46 57 20 73 24 65 15 64 42 50 15 36 24 35 20 27 46 43z',
+ },
+ ],
+} satisfies SvgData;
+
+export const icon_action = {
+ label: 'action, lightning bolt',
+ paths: [{d: 'M56 3L25 47h18l-6 50 37-52h-18z'}],
+} satisfies SvgData;
+
+export const icon_view = {
+ label: 'view, eye',
+ paths: [
+ {
+ d: 'M50 20c-25 0-42 30-42 30s17 30 42 30 42-30 42-30-17-30-42-30zm0 10a20 20 0 1 1 0 40 20 20 0 0 1 0-40zm0 12a8 8 0 1 0 0 16 8 8 0 0 0 0-16z',
+ },
+ ],
+} satisfies SvgData;
+
+export const icon_preview = {
+ label: 'preview, half-open eye',
+ paths: [
+ {
+ d: 'M50 35c-25 0-42 15-42 15s17 15 42 15 42-15 42-15-17-15-42-15zm0 3a12 12 0 1 1 0 24 12 12 0 0 1 0-24zm0 5a7 7 0 1 0 0 14 7 7 0 0 0 0-14z',
+ },
+ ],
+} satisfies SvgData;
+
+export const icon_log = {
+ label: 'log, scroll',
+ paths: [
+ {
+ d: 'M20 10h50a10 10 0 0 1 10 10v60a10 10 0 0 1-10 10h-50a10 10 0 0 1-10-10v-60a10 10 0 0 1 10-10zm5 15v50h40v-50zm5 8h30v6h-30zm0 14h30v6h-30zm0 14h20v6h-20z',
+ },
+ ],
+} satisfies SvgData;
+
+export const icon_tab = {
+ label: 'tab, window frame',
+ paths: [
+ {
+ d: 'M10 15h80v70h-80zm8 8v10h25v-10zm0 18v34h64v-34z',
+ },
+ ],
+} satisfies SvgData;
+
+export const icon_project = {
+ label: 'project, hexagon',
+ paths: [
+ {
+ d: 'M50 5l40 23v44l-40 23-40-23v-44zm0 12l-30 17v34l30 17 30-17v-34z',
+ },
+ ],
+} satisfies SvgData;
+
+export const icon_capability = {
+ label: 'capability, wrench',
+ paths: [
+ {
+ d: 'M72 8a28 28 0 0 0-25 40l-30 30a8 8 0 0 0 0 11l4 4a8 8 0 0 0 11 0l30-30a28 28 0 0 0 38-32q-4 6-10 8q-5 2-10 0q-5-2-8-8l0-13q2-6 5-10a28 28 0 0 0-5 0z',
+ },
+ ],
+} satisfies SvgData;
+
+export const icon_settings = {
+ label: 'settings, gear',
+ paths: [
+ {
+ d: 'M43 9h14l2 12a35 35 0 0 1 10 6l11-5 7 12-9 8a35 35 0 0 1 0 12l9 8-7 12-11-5a35 35 0 0 1-10 6l-2 12h-14l-2-12a35 35 0 0 1-10-6l-11 5-7-12 9-8a35 35 0 0 1 0-12l-9-8 7-12 11 5a35 35 0 0 1 10-6zM50 34a15 15 0 1 0 0 30 15 15 0 0 0 0-30z',
+ },
+ ],
+} satisfies SvgData;
+
+export const icon_domain = {
+ label: 'domain, diamond',
+ paths: [
+ {
+ d: 'M50 18l50 32-50 32-50-32zm0 12l-32 20 32 20 32-20z',
+ },
+ ],
+} satisfies SvgData;
+
+export const icon_page = {
+ label: 'page, browser window',
+ paths: [
+ {
+ d: 'M10 10h80v80h-80zm8 8v12h64v-12zm0 20v44h64v-44z',
+ },
+ ],
+} satisfies SvgData;
+
+// --- Space/Container ---
+
+export const icon_space = {
+ label: 'space, house',
+ paths: [
+ {
+ d: 'M50 10l40 35h-12v40h-20v-25h-16v25h-20v-40h-12zm0 18l-20 17v30h8v-25h24v25h8v-30z',
+ },
+ ],
+} satisfies SvgData;
+
+export const icon_desk = {
+ label: 'desk, star in circle',
+ paths: [
+ {
+ d: 'M50 5a45 45 0 1 0 0 90 45 45 0 0 0 0-90zm0 10a35 35 0 1 1 0 70 35 35 0 0 1 0-70zm0 8l8 16 18 3-13 13 3 18-16-8-16 8 3-18-13-13 18-3z',
+ },
+ ],
+} satisfies SvgData;
+
+export const icon_pin = {
+ label: 'pin, thumbtack',
+ paths: [
+ {
+ d: 'M50 5a18 18 0 0 0-18 18c0 7 4 13 9 17l-6 18h30l-6-18c5-4 9-10 9-17a18 18 0 0 0-18-18zm-3 53h6l-3 35-3-35z',
+ },
+ ],
+} satisfies SvgData;
+
+// --- System ---
+
+export const icon_terminal = {
+ label: 'terminal, command prompt',
+ paths: [
+ {
+ d: 'M5 5h90v90h-90zm8 8v74h74v-74zm12 15l20 20-20 20-7-7 13-13-13-13zm25 35h30v8h-30z',
+ },
+ ],
+} satisfies SvgData;
+
+export const icon_workspace = {
+ label: 'workspace, grid',
+ paths: [
+ {
+ d: 'M10 10h35v35h-35zm45 0h35v35h-35zm-45 45h35v35h-35zm46 0h34v35h-34z',
+ },
+ ],
+} satisfies SvgData;
+
+export const icon_idea = {
+ label: 'idea, lightbulb',
+ paths: [
+ {
+ d: 'M50 5a30 30 0 0 0-30 30c0 12 7 22 15 28v12a5 5 0 0 0 5 5h20a5 5 0 0 0 5-5v-12c8-6 15-16 15-28a30 30 0 0 0-30-30zm0 12a18 18 0 0 1 18 18c0 8-5 15-12 20v8h-12v-8c-7-5-12-12-12-20a18 18 0 0 1 18-18zm-8 70h16v6h-16z',
+ },
+ ],
+} satisfies SvgData;
+
+// --- Communication ---
+
+export const icon_ping = {
+ label: 'ping, circular arrow',
+ paths: [
+ {
+ d: 'M50 15a35 35 0 1 1-25 10l7 7a24 24 0 1 0 18-6v10l-17-17 17-17v13z',
+ },
+ ],
+} satisfies SvgData;
+
+export const icon_heartbeat = {
+ label: 'heartbeat, pulse line',
+ paths: [
+ {
+ d: 'M5 50h25l8-20 12 40 12-40 8 20h25v8h-30l-5-12-12 40-12-40-5 12h-26z',
+ },
+ ],
+} satisfies SvgData;
+
+export const icon_response = {
+ label: 'response, reply arrow',
+ paths: [{d: 'M40 20l-30 30 30 30v-20h30c10 0 15 5 15 15v15h10v-15c0-20-10-30-25-30h-30z'}],
+} satisfies SvgData;
+
+export const icon_session = {
+ label: 'session, hexagon with dot',
+ paths: [
+ {
+ d: 'M50 5l40 23v44l-40 23-40-23v-44zm0 12l-30 17v34l30 17 30-17v-34zm0 20a13 13 0 1 0 0 26 13 13 0 0 0 0-26z',
+ },
+ ],
+} satisfies SvgData;
+
+// --- Action Types ---
+
+export const icon_action_type_local_call = {
+ label: 'local call, arrow to target',
+ paths: [
+ {d: 'M10 45h25v-15l20 20-20 20v-15h-25z'},
+ {d: 'M66 50a14 14 0 1 1 28 0 14 14 0 1 1-28 0zM71 50a9 9 0 1 0 18 0 9 9 0 1 0-18 0zM77 50a3 3 0 1 1 6 0 3 3 0 1 1-6 0z'},
+ ],
+} satisfies SvgData;
+
+export const icon_action_type_remote_notification = {
+ label: 'remote notification, arrow with signal',
+ paths: [
+ {d: 'M10 45h25v-15l20 20-20 20v-15h-25z'},
+ {d: 'M70 33a19 19 0 0 1 0 34 16 16 0 0 0 0-34z'},
+ {d: 'M78 27a27 27 0 0 1 0 46 24 24 0 0 0 0-46z'},
+ ],
+} satisfies SvgData;
+
+export const icon_action_type_request_response = {
+ label: 'request response, bidirectional arrows',
+ paths: [
+ {
+ d: 'M10 30h25v-15l20 20-20 20v-15h-25zM90 60h-25v-15l-20 20 20 20v-15h25z',
+ },
+ ],
+} satisfies SvgData;
+
+// --- Links ---
+
+export const icon_external_link = {
+ label: 'external link, arrow out of box',
+ paths: [
+ {
+ d: 'M70 5h25v25l-10-10-30 30-7-7 30-30zm-50 10h30v10h-30v50h50v-30h10v35a5 5 0 0 1-5 5h-60a5 5 0 0 1-5-5v-60a5 5 0 0 1 5-5z',
+ },
+ ],
+} satisfies SvgData;
+
+export const icon_arrow_right = {
+ label: 'arrow right',
+ paths: [{d: 'M10 45h55v-15l25 20-25 20v-15h-55z'}],
+} satisfies SvgData;
+
+export const icon_arrow_left = {
+ label: 'arrow left',
+ paths: [{d: 'M90 45h-55v-15l-25 20 25 20v-15h55z'}],
+} satisfies SvgData;
+
+// --- Backend ---
+
+export const icon_backend = {
+ label: 'backend, server',
+ paths: [
+ {
+ d: 'M15 10h70v25h-70zm8 7a5 5 0 1 0 0 10 5 5 0 0 0 0-10zm15 0h30v10h-30zm-23 23h70v25h-70zm8 7a5 5 0 1 0 0 10 5 5 0 0 0 0-10zm15 0h30v10h-30zm-23 23h70v25h-70zm8 7a5 5 0 1 0 0 10 5 5 0 0 0 0-10zm15 0h30v10h-30z',
+ },
+ ],
+} satisfies SvgData;
diff --git a/src/routes/docs/icons/+page.svelte b/src/routes/docs/icons/+page.svelte
new file mode 100644
index 000000000..f4323e02e
--- /dev/null
+++ b/src/routes/docs/icons/+page.svelte
@@ -0,0 +1,211 @@
+
+
+
+ Fuz includes a number of icons available as data that can be mounted with the
+ `} />
+
+ {#each icon_entries as entry (entry.name)}
+
+
`} />
`} />
`} />
`} />
`} />
`} />
`} />
`} />
`} />
`} />
`} />
`} />
@@ -102,8 +118,11 @@
margin-bottom: var(--space_xl7);
}
+ li :global(svg) {
+ background-color: var(--shade_05);
+ }
+
a {
- display: block;
--text_color: var(--text_90);
margin-bottom: var(--space_lg);
}
diff --git a/src/routes/docs/tomes.ts b/src/routes/docs/tomes.ts
index 7ce7f2bd8..45939f507 100644
--- a/src/routes/docs/tomes.ts
+++ b/src/routes/docs/tomes.ts
@@ -17,6 +17,7 @@ import Breadcrumb from '$routes/docs/Breadcrumb/+page.svelte';
import Card from '$routes/docs/Card/+page.svelte';
import Svg from '$routes/docs/Svg/+page.svelte';
import csp from '$routes/docs/csp/+page.svelte';
+import icons from '$routes/docs/icons/+page.svelte';
import logos from '$routes/docs/logos/+page.svelte';
import theming from '$routes/docs/theming/+page.svelte';
import api from '$routes/docs/api/+page.svelte';
@@ -88,6 +89,14 @@ export const tomes: Array