@mich8060/chg-design-system 0.1.0

package/src/pages/IconDemo.jsx

@@ -0,0 +1,1680 @@
+import React, { useState, useMemo } from "react";
+import { Link } from "react-router-dom";
+import Icon from "../ui/Icon/Icon";
+import Flex from "../ui/Flex/Flex";
+import Breadcrumb from "../ui/Breadcrumb/Breadcrumb";
+import Divider from "../ui/Divider/Divider";
+import Tabs from "../ui/Tabs/Tabs";
+import { formatLastUpdated } from "../utils/formatDate";
+
+// All available icon names from Phosphor
+const allIconNames = [
+  "acorn",
+  "address-book",
+  "address-book-tabs",
+  "air-traffic-control",
+  "airplane",
+  "airplane-in-flight",
+  "airplane-landing",
+  "airplane-takeoff",
+  "airplane-taxiing",
+  "airplane-tilt",
+  "airplay",
+  "alarm",
+  "alien",
+  "align-bottom",
+  "align-bottom-simple",
+  "align-center-horizontal",
+  "align-center-horizontal-simple",
+  "align-center-vertical",
+  "align-center-vertical-simple",
+  "align-left",
+  "align-left-simple",
+  "align-right",
+  "align-right-simple",
+  "align-top",
+  "align-top-simple",
+  "amazon-logo",
+  "ambulance",
+  "anchor",
+  "anchor-simple",
+  "android-logo",
+  "angle",
+  "angular-logo",
+  "aperture",
+  "app-store-logo",
+  "app-window",
+  "apple-logo",
+  "apple-podcasts-logo",
+  "approximate-equals",
+  "archive",
+  "armchair",
+  "arrow-arc-left",
+  "arrow-arc-right",
+  "arrow-bend-double-up-left",
+  "arrow-bend-double-up-right",
+  "arrow-bend-down-left",
+  "arrow-bend-down-right",
+  "arrow-bend-left-down",
+  "arrow-bend-left-up",
+  "arrow-bend-right-down",
+  "arrow-bend-right-up",
+  "arrow-bend-up-left",
+  "arrow-bend-up-right",
+  "arrow-circle-down",
+  "arrow-circle-down-left",
+  "arrow-circle-down-right",
+  "arrow-circle-left",
+  "arrow-circle-right",
+  "arrow-circle-up",
+  "arrow-circle-up-left",
+  "arrow-circle-up-right",
+  "arrow-clockwise",
+  "arrow-counter-clockwise",
+  "arrow-down",
+  "arrow-down-left",
+  "arrow-down-right",
+  "arrow-elbow-down-left",
+  "arrow-elbow-down-right",
+  "arrow-elbow-left",
+  "arrow-elbow-left-down",
+  "arrow-elbow-left-up",
+  "arrow-elbow-right",
+  "arrow-elbow-right-down",
+  "arrow-elbow-right-up",
+  "arrow-elbow-up-left",
+  "arrow-elbow-up-right",
+  "arrow-fat-down",
+  "arrow-fat-left",
+  "arrow-fat-line-down",
+  "arrow-fat-line-left",
+  "arrow-fat-line-right",
+  "arrow-fat-line-up",
+  "arrow-fat-lines-down",
+  "arrow-fat-lines-left",
+  "arrow-fat-lines-right",
+  "arrow-fat-lines-up",
+  "arrow-fat-right",
+  "arrow-fat-up",
+  "arrow-left",
+  "arrow-line-down",
+  "arrow-line-down-left",
+  "arrow-line-down-right",
+  "arrow-line-left",
+  "arrow-line-right",
+  "arrow-line-up",
+  "arrow-line-up-left",
+  "arrow-line-up-right",
+  "arrow-right",
+  "arrow-square-down",
+  "arrow-square-down-left",
+  "arrow-square-down-right",
+  "arrow-square-in",
+  "arrow-square-left",
+  "arrow-square-out",
+  "arrow-square-right",
+  "arrow-square-up",
+  "arrow-square-up-left",
+  "arrow-square-up-right",
+  "arrow-u-down-left",
+  "arrow-u-down-right",
+  "arrow-u-left-down",
+  "arrow-u-left-up",
+  "arrow-u-right-down",
+  "arrow-u-right-up",
+  "arrow-u-up-left",
+  "arrow-u-up-right",
+  "arrow-up",
+  "arrow-up-left",
+  "arrow-up-right",
+  "arrows-clockwise",
+  "arrows-counter-clockwise",
+  "arrows-down-up",
+  "arrows-horizontal",
+  "arrows-in",
+  "arrows-in-cardinal",
+  "arrows-in-line-horizontal",
+  "arrows-in-line-vertical",
+  "arrows-in-simple",
+  "arrows-left-right",
+  "arrows-merge",
+  "arrows-out",
+  "arrows-out-cardinal",
+  "arrows-out-line-horizontal",
+  "arrows-out-line-vertical",
+  "arrows-out-simple",
+  "arrows-split",
+  "arrows-vertical",
+  "article",
+  "article-medium",
+  "article-ny-times",
+  "asclepius",
+  "asterisk",
+  "asterisk-simple",
+  "at",
+  "atom",
+  "avocado",
+  "axe",
+  "baby",
+  "baby-carriage",
+  "backpack",
+  "backspace",
+  "bag",
+  "bag-simple",
+  "balloon",
+  "bandaids",
+  "bank",
+  "barbell",
+  "barcode",
+  "barn",
+  "barricade",
+  "baseball",
+  "baseball-cap",
+  "baseball-helmet",
+  "basket",
+  "basketball",
+  "bathtub",
+  "battery-charging",
+  "battery-charging-vertical",
+  "battery-empty",
+  "battery-full",
+  "battery-high",
+  "battery-low",
+  "battery-medium",
+  "battery-plus",
+  "battery-plus-vertical",
+  "battery-vertical-empty",
+  "battery-vertical-full",
+  "battery-vertical-high",
+  "battery-vertical-low",
+  "battery-vertical-medium",
+  "battery-warning",
+  "battery-warning-vertical",
+  "beach-ball",
+  "beanie",
+  "bed",
+  "beer-bottle",
+  "beer-stein",
+  "behance-logo",
+  "bell",
+  "bell-ringing",
+  "bell-simple",
+  "bell-simple-ringing",
+  "bell-simple-slash",
+  "bell-simple-z",
+  "bell-slash",
+  "bell-z",
+  "belt",
+  "bezier-curve",
+  "bicycle",
+  "binary",
+  "binoculars",
+  "biohazard",
+  "bird",
+  "blueprint",
+  "bluetooth",
+  "bluetooth-connected",
+  "bluetooth-slash",
+  "bluetooth-x",
+  "boat",
+  "bomb",
+  "bone",
+  "book",
+  "book-bookmark",
+  "book-open",
+  "book-open-text",
+  "book-open-user",
+  "bookmark",
+  "bookmark-simple",
+  "bookmarks",
+  "bookmarks-simple",
+  "books",
+  "boot",
+  "boules",
+  "bounding-box",
+  "bowl-food",
+  "bowl-steam",
+  "bowling-ball",
+  "box-arrow-down",
+  "box-arrow-up",
+  "boxing-glove",
+  "brackets-angle",
+  "brackets-curly",
+  "brackets-round",
+  "brackets-square",
+  "brain",
+  "brandy",
+  "bread",
+  "bridge",
+  "briefcase",
+  "briefcase-metal",
+  "broadcast",
+  "broom",
+  "browser",
+  "browsers",
+  "bug",
+  "bug-beetle",
+  "bug-droid",
+  "building",
+  "building-apartment",
+  "building-office",
+  "buildings",
+  "bulldozer",
+  "bus",
+  "butterfly",
+  "cable-car",
+  "cactus",
+  "cake",
+  "calculator",
+  "calendar",
+  "calendar-blank",
+  "calendar-check",
+  "calendar-dot",
+  "calendar-dots",
+  "calendar-heart",
+  "calendar-minus",
+  "calendar-plus",
+  "calendar-slash",
+  "calendar-star",
+  "calendar-x",
+  "call-bell",
+  "camera",
+  "camera-plus",
+  "camera-rotate",
+  "camera-slash",
+  "campfire",
+  "car",
+  "car-battery",
+  "car-profile",
+  "car-simple",
+  "cardholder",
+  "cards",
+  "cards-three",
+  "caret-circle-double-down",
+  "caret-circle-double-left",
+  "caret-circle-double-right",
+  "caret-circle-double-up",
+  "caret-circle-down",
+  "caret-circle-left",
+  "caret-circle-right",
+  "caret-circle-up",
+  "caret-circle-up-down",
+  "caret-double-down",
+  "caret-double-left",
+  "caret-double-right",
+  "caret-double-up",
+  "caret-down",
+  "caret-left",
+  "caret-line-down",
+  "caret-line-left",
+  "caret-line-right",
+  "caret-line-up",
+  "caret-right",
+  "caret-up",
+  "caret-up-down",
+  "carrot",
+  "cash-register",
+  "cassette-tape",
+  "castle-turret",
+  "cat",
+  "cell-signal-full",
+  "cell-signal-high",
+  "cell-signal-low",
+  "cell-signal-medium",
+  "cell-signal-none",
+  "cell-signal-slash",
+  "cell-signal-x",
+  "cell-tower",
+  "certificate",
+  "chair",
+  "chalkboard",
+  "chalkboard-simple",
+  "chalkboard-teacher",
+  "champagne",
+  "charging-station",
+  "chart-bar",
+  "chart-bar-horizontal",
+  "chart-donut",
+  "chart-line",
+  "chart-line-down",
+  "chart-line-up",
+  "chart-pie",
+  "chart-pie-slice",
+  "chart-polar",
+  "chart-scatter",
+  "chat",
+  "chat-centered",
+  "chat-centered-dots",
+  "chat-centered-slash",
+  "chat-centered-text",
+  "chat-circle",
+  "chat-circle-dots",
+  "chat-circle-slash",
+  "chat-circle-text",
+  "chat-dots",
+  "chat-slash",
+  "chat-teardrop",
+  "chat-teardrop-dots",
+  "chat-teardrop-slash",
+  "chat-teardrop-text",
+  "chat-text",
+  "chats",
+  "chats-circle",
+  "chats-teardrop",
+  "check",
+  "check-circle",
+  "check-fat",
+  "check-square",
+  "check-square-offset",
+  "checkerboard",
+  "checks",
+  "cheers",
+  "cheese",
+  "chef-hat",
+  "cherries",
+  "church",
+  "cigarette",
+  "cigarette-slash",
+  "circle",
+  "circle-dashed",
+  "circle-half",
+  "circle-half-tilt",
+  "circle-notch",
+  "circles-four",
+  "circles-three",
+  "circles-three-plus",
+  "circuitry",
+  "city",
+  "clipboard",
+  "clipboard-text",
+  "clock",
+  "clock-afternoon",
+  "clock-clockwise",
+  "clock-countdown",
+  "clock-counter-clockwise",
+  "clock-user",
+  "closed-captioning",
+  "cloud",
+  "cloud-arrow-down",
+  "cloud-arrow-up",
+  "cloud-check",
+  "cloud-fog",
+  "cloud-lightning",
+  "cloud-moon",
+  "cloud-rain",
+  "cloud-slash",
+  "cloud-snow",
+  "cloud-sun",
+  "cloud-warning",
+  "cloud-x",
+  "clover",
+  "club",
+  "coat-hanger",
+  "coda-logo",
+  "code",
+  "code-block",
+  "code-simple",
+  "codepen-logo",
+  "codesandbox-logo",
+  "coffee",
+  "coffee-bean",
+  "coin",
+  "coin-vertical",
+  "coins",
+  "columns",
+  "columns-plus-left",
+  "columns-plus-right",
+  "command",
+  "compass",
+  "compass-rose",
+  "compass-tool",
+  "computer-tower",
+  "confetti",
+  "contactless-payment",
+  "control",
+  "cookie",
+  "cooking-pot",
+  "copy",
+  "copy-simple",
+  "copyleft",
+  "copyright",
+  "corners-in",
+  "corners-out",
+  "couch",
+  "court-basketball",
+  "cow",
+  "cowboy-hat",
+  "cpu",
+  "crane",
+  "crane-tower",
+  "credit-card",
+  "cricket",
+  "crop",
+  "cross",
+  "crosshair",
+  "crosshair-simple",
+  "crown",
+  "crown-cross",
+  "crown-simple",
+  "cube",
+  "cube-focus",
+  "cube-transparent",
+  "currency-btc",
+  "currency-circle-dollar",
+  "currency-cny",
+  "currency-dollar",
+  "currency-dollar-simple",
+  "currency-eth",
+  "currency-eur",
+  "currency-gbp",
+  "currency-inr",
+  "currency-jpy",
+  "currency-krw",
+  "currency-kzt",
+  "currency-ngn",
+  "currency-rub",
+  "cursor",
+  "cursor-click",
+  "cursor-text",
+  "cylinder",
+  "database",
+  "desk",
+  "desktop",
+  "desktop-tower",
+  "detective",
+  "dev-to-logo",
+  "device-mobile",
+  "device-mobile-camera",
+  "device-mobile-slash",
+  "device-mobile-speaker",
+  "device-rotate",
+  "device-tablet",
+  "device-tablet-camera",
+  "device-tablet-speaker",
+  "devices",
+  "diamond",
+  "diamonds-four",
+  "dice-five",
+  "dice-four",
+  "dice-one",
+  "dice-six",
+  "dice-three",
+  "dice-two",
+  "disc",
+  "disco-ball",
+  "discord-logo",
+  "divide",
+  "dna",
+  "dog",
+  "door",
+  "door-open",
+  "dot",
+  "dot-outline",
+  "dots-nine",
+  "dots-six",
+  "dots-six-vertical",
+  "dots-three",
+  "dots-three-circle",
+  "dots-three-circle-vertical",
+  "dots-three-outline",
+  "dots-three-outline-vertical",
+  "dots-three-vertical",
+  "download",
+  "download-simple",
+  "dress",
+  "dresser",
+  "dribbble-logo",
+  "drone",
+  "drop",
+  "drop-half",
+  "drop-half-bottom",
+  "drop-simple",
+  "drop-slash",
+  "dropbox-logo",
+  "ear",
+  "ear-slash",
+  "egg",
+  "egg-crack",
+  "eject",
+  "eject-simple",
+  "elevator",
+  "empty",
+  "engine",
+  "envelope",
+  "envelope-open",
+  "envelope-simple",
+  "envelope-simple-open",
+  "equalizer",
+  "equals",
+  "eraser",
+  "escalator-down",
+  "escalator-up",
+  "exam",
+  "exclamation-mark",
+  "exclude",
+  "exclude-square",
+  "export",
+  "eye",
+  "eye-closed",
+  "eye-slash",
+  "eyedropper",
+  "eyedropper-sample",
+  "eyeglasses",
+  "eyes",
+  "face-mask",
+  "facebook-logo",
+  "factory",
+  "faders",
+  "faders-horizontal",
+  "fallout-shelter",
+  "fan",
+  "farm",
+  "fast-forward",
+  "fast-forward-circle",
+  "feather",
+  "fediverse-logo",
+  "figma-logo",
+  "file",
+  "file-archive",
+  "file-arrow-down",
+  "file-arrow-up",
+  "file-audio",
+  "file-c",
+  "file-c-sharp",
+  "file-cloud",
+  "file-code",
+  "file-cpp",
+  "file-css",
+  "file-csv",
+  "file-dashed",
+  "file-doc",
+  "file-html",
+  "file-image",
+  "file-ini",
+  "file-jpg",
+  "file-js",
+  "file-jsx",
+  "file-lock",
+  "file-magnifying-glass",
+  "file-md",
+  "file-minus",
+  "file-pdf",
+  "file-plus",
+  "file-png",
+  "file-ppt",
+  "file-py",
+  "file-rs",
+  "file-sql",
+  "file-svg",
+  "file-text",
+  "file-ts",
+  "file-tsx",
+  "file-txt",
+  "file-video",
+  "file-vue",
+  "file-x",
+  "file-xls",
+  "file-zip",
+  "files",
+  "film-reel",
+  "film-script",
+  "film-slate",
+  "film-strip",
+  "fingerprint",
+  "fingerprint-simple",
+  "finn-the-human",
+  "fire",
+  "fire-extinguisher",
+  "fire-simple",
+  "fire-truck",
+  "first-aid",
+  "first-aid-kit",
+  "fish",
+  "fish-simple",
+  "flag",
+  "flag-banner",
+  "flag-banner-fold",
+  "flag-checkered",
+  "flag-pennant",
+  "flame",
+  "flashlight",
+  "flask",
+  "flip-horizontal",
+  "flip-vertical",
+  "floppy-disk",
+  "floppy-disk-back",
+  "flow-arrow",
+  "flower",
+  "flower-lotus",
+  "flower-tulip",
+  "flying-saucer",
+  "folder",
+  "folder-dashed",
+  "folder-lock",
+  "folder-minus",
+  "folder-open",
+  "folder-plus",
+  "folder-simple",
+  "folder-simple-dashed",
+  "folder-simple-lock",
+  "folder-simple-minus",
+  "folder-simple-plus",
+  "folder-simple-star",
+  "folder-simple-user",
+  "folder-star",
+  "folder-user",
+  "folders",
+  "football",
+  "football-helmet",
+  "footprints",
+  "fork-knife",
+  "four-k",
+  "frame-corners",
+  "framer-logo",
+  "function",
+  "funnel",
+  "funnel-simple",
+  "funnel-simple-x",
+  "funnel-x",
+  "game-controller",
+  "garage",
+  "gas-can",
+  "gas-pump",
+  "gauge",
+  "gavel",
+  "gear",
+  "gear-fine",
+  "gear-six",
+  "gender-female",
+  "gender-intersex",
+  "gender-male",
+  "gender-neuter",
+  "gender-nonbinary",
+  "gender-transgender",
+  "ghost",
+  "gif",
+  "gift",
+  "git-branch",
+  "git-commit",
+  "git-diff",
+  "git-fork",
+  "git-merge",
+  "git-pull-request",
+  "github-logo",
+  "gitlab-logo",
+  "gitlab-logo-simple",
+  "globe",
+  "globe-hemisphere-east",
+  "globe-hemisphere-west",
+  "globe-simple",
+  "globe-simple-x",
+  "globe-stand",
+  "globe-x",
+  "goggles",
+  "golf",
+  "goodreads-logo",
+  "google-cardboard-logo",
+  "google-chrome-logo",
+  "google-drive-logo",
+  "google-logo",
+  "google-photos-logo",
+  "google-play-logo",
+  "google-podcasts-logo",
+  "gps",
+  "gps-fix",
+  "gps-slash",
+  "gradient",
+  "graduation-cap",
+  "grains",
+  "grains-slash",
+  "graph",
+  "graphics-card",
+  "greater-than",
+  "greater-than-or-equal",
+  "grid-four",
+  "grid-nine",
+  "guitar",
+  "hair-dryer",
+  "hamburger",
+  "hammer",
+  "hand",
+  "hand-arrow-down",
+  "hand-arrow-up",
+  "hand-coins",
+  "hand-deposit",
+  "hand-eye",
+  "hand-fist",
+  "hand-grabbing",
+  "hand-heart",
+  "hand-palm",
+  "hand-peace",
+  "hand-pointing",
+  "hand-soap",
+  "hand-swipe-left",
+  "hand-swipe-right",
+  "hand-tap",
+  "hand-waving",
+  "hand-withdraw",
+  "handbag",
+  "handbag-simple",
+  "hands-clapping",
+  "hands-praying",
+  "handshake",
+  "hard-drive",
+  "hard-drives",
+  "hard-hat",
+  "hash",
+  "hash-straight",
+  "head-circuit",
+  "headlights",
+  "headphones",
+  "headset",
+  "heart",
+  "heart-break",
+  "heart-half",
+  "heart-straight",
+  "heart-straight-break",
+  "heartbeat",
+  "hexagon",
+  "high-definition",
+  "high-heel",
+  "highlighter",
+  "highlighter-circle",
+  "hockey",
+  "hoodie",
+  "horse",
+  "hospital",
+  "hourglass",
+  "hourglass-high",
+  "hourglass-low",
+  "hourglass-medium",
+  "hourglass-simple",
+  "hourglass-simple-high",
+  "hourglass-simple-low",
+  "hourglass-simple-medium",
+  "house",
+  "house-line",
+  "house-simple",
+  "hurricane",
+  "ice-cream",
+  "identification-badge",
+  "identification-card",
+  "image",
+  "image-broken",
+  "image-square",
+  "images",
+  "images-square",
+  "infinity",
+  "info",
+  "instagram-logo",
+  "intersect",
+  "intersect-square",
+  "intersect-three",
+  "intersection",
+  "invoice",
+  "island",
+  "jar",
+  "jar-label",
+  "jeep",
+  "joystick",
+  "kanban",
+  "key",
+  "key-return",
+  "keyboard",
+  "keyhole",
+  "knife",
+  "ladder",
+  "ladder-simple",
+  "lamp",
+  "lamp-pendant",
+  "laptop",
+  "lasso",
+  "lastfm-logo",
+  "layout",
+  "leaf",
+  "lectern",
+  "lego",
+  "lego-smiley",
+  "less-than",
+  "less-than-or-equal",
+  "letter-circle-h",
+  "letter-circle-p",
+  "letter-circle-v",
+  "lifebuoy",
+  "lightbulb",
+  "lightbulb-filament",
+  "lighthouse",
+  "lightning",
+  "lightning-a",
+  "lightning-slash",
+  "line-segment",
+  "line-segments",
+  "line-vertical",
+  "link",
+  "link-break",
+  "link-simple",
+  "link-simple-break",
+  "link-simple-horizontal",
+  "link-simple-horizontal-break",
+  "linkedin-logo",
+  "linktree-logo",
+  "linux-logo",
+  "list",
+  "list-bullets",
+  "list-checks",
+  "list-dashes",
+  "list-heart",
+  "list-magnifying-glass",
+  "list-numbers",
+  "list-plus",
+  "list-star",
+  "lock",
+  "lock-key",
+  "lock-key-open",
+  "lock-laminated",
+  "lock-laminated-open",
+  "lock-open",
+  "lock-simple",
+  "lock-simple-open",
+  "lockers",
+  "log",
+  "magic-wand",
+  "magnet",
+  "magnet-straight",
+  "magnifying-glass",
+  "magnifying-glass-minus",
+  "magnifying-glass-plus",
+  "mailbox",
+  "map-pin",
+  "map-pin-area",
+  "map-pin-line",
+  "map-pin-plus",
+  "map-pin-simple",
+  "map-pin-simple-area",
+  "map-pin-simple-line",
+  "map-trifold",
+  "markdown-logo",
+  "marker-circle",
+  "martini",
+  "mask-happy",
+  "mask-sad",
+  "mastodon-logo",
+  "math-operations",
+  "matrix-logo",
+  "medal",
+  "medal-military",
+  "medium-logo",
+  "megaphone",
+  "megaphone-simple",
+  "member-of",
+  "memory",
+  "messenger-logo",
+  "meta-logo",
+  "meteor",
+  "metronome",
+  "microphone",
+  "microphone-slash",
+  "microphone-stage",
+  "microscope",
+  "microsoft-excel-logo",
+  "microsoft-outlook-logo",
+  "microsoft-powerpoint-logo",
+  "microsoft-teams-logo",
+  "microsoft-word-logo",
+  "minus",
+  "minus-circle",
+  "minus-square",
+  "money",
+  "money-wavy",
+  "monitor",
+  "monitor-arrow-up",
+  "monitor-play",
+  "moon",
+  "moon-stars",
+  "moped",
+  "moped-front",
+  "mosque",
+  "motorcycle",
+  "mountains",
+  "mouse",
+  "mouse-left-click",
+  "mouse-middle-click",
+  "mouse-right-click",
+  "mouse-scroll",
+  "mouse-simple",
+  "music-note",
+  "music-note-simple",
+  "music-notes",
+  "music-notes-minus",
+  "music-notes-plus",
+  "music-notes-simple",
+  "navigation-arrow",
+  "needle",
+  "network",
+  "network-slash",
+  "network-x",
+  "newspaper",
+  "newspaper-clipping",
+  "not-equals",
+  "not-member-of",
+  "not-subset-of",
+  "not-superset-of",
+  "notches",
+  "note",
+  "note-blank",
+  "note-pencil",
+  "notebook",
+  "notepad",
+  "notification",
+  "notion-logo",
+  "nuclear-plant",
+  "number-circle-eight",
+  "number-circle-five",
+  "number-circle-four",
+  "number-circle-nine",
+  "number-circle-one",
+  "number-circle-seven",
+  "number-circle-six",
+  "number-circle-three",
+  "number-circle-two",
+  "number-circle-zero",
+  "number-eight",
+  "number-five",
+  "number-four",
+  "number-nine",
+  "number-one",
+  "number-seven",
+  "number-six",
+  "number-square-eight",
+  "number-square-five",
+  "number-square-four",
+  "number-square-nine",
+  "number-square-one",
+  "number-square-seven",
+  "number-square-six",
+  "number-square-three",
+  "number-square-two",
+  "number-square-zero",
+  "number-three",
+  "number-two",
+  "number-zero",
+  "numpad",
+  "nut",
+  "ny-times-logo",
+  "octagon",
+  "office-chair",
+  "onigiri",
+  "open-ai-logo",
+  "option",
+  "orange",
+  "orange-slice",
+  "oven",
+  "package",
+  "paint-brush",
+  "paint-brush-broad",
+  "paint-brush-household",
+  "paint-bucket",
+  "paint-roller",
+  "palette",
+  "panorama",
+  "pants",
+  "paper-plane",
+  "paper-plane-right",
+  "paper-plane-tilt",
+  "paperclip",
+  "paperclip-horizontal",
+  "parachute",
+  "paragraph",
+  "parallelogram",
+  "park",
+  "password",
+  "path",
+  "patreon-logo",
+  "pause",
+  "pause-circle",
+  "paw-print",
+  "paypal-logo",
+  "peace",
+  "pen",
+  "pen-nib",
+  "pen-nib-straight",
+  "pencil",
+  "pencil-circle",
+  "pencil-line",
+  "pencil-ruler",
+  "pencil-simple",
+  "pencil-simple-line",
+  "pencil-simple-slash",
+  "pencil-slash",
+  "pentagon",
+  "pentagram",
+  "pepper",
+  "percent",
+  "person",
+  "person-arms-spread",
+  "person-simple",
+  "person-simple-bike",
+  "person-simple-circle",
+  "person-simple-hike",
+  "person-simple-run",
+  "person-simple-ski",
+  "person-simple-snowboard",
+  "person-simple-swim",
+  "person-simple-tai-chi",
+  "person-simple-throw",
+  "person-simple-walk",
+  "perspective",
+  "phone",
+  "phone-call",
+  "phone-disconnect",
+  "phone-incoming",
+  "phone-list",
+  "phone-outgoing",
+  "phone-pause",
+  "phone-plus",
+  "phone-slash",
+  "phone-transfer",
+  "phone-x",
+  "phosphor-logo",
+  "pi",
+  "piano-keys",
+  "picnic-table",
+  "picture-in-picture",
+  "piggy-bank",
+  "pill",
+  "ping-pong",
+  "pint-glass",
+  "pinterest-logo",
+  "pinwheel",
+  "pipe",
+  "pipe-wrench",
+  "pix-logo",
+  "pizza",
+  "placeholder",
+  "planet",
+  "plant",
+  "play",
+  "play-circle",
+  "play-pause",
+  "playlist",
+  "plug",
+  "plug-charging",
+  "plugs",
+  "plugs-connected",
+  "plus",
+  "plus-circle",
+  "plus-minus",
+  "plus-square",
+  "poker-chip",
+  "police-car",
+  "polygon",
+  "popcorn",
+  "popsicle",
+  "potted-plant",
+  "power",
+  "prescription",
+  "presentation",
+  "presentation-chart",
+  "printer",
+  "prohibit",
+  "prohibit-inset",
+  "projector-screen",
+  "projector-screen-chart",
+  "pulse",
+  "push-pin",
+  "push-pin-simple",
+  "push-pin-simple-slash",
+  "push-pin-slash",
+  "puzzle-piece",
+  "qr-code",
+  "question",
+  "question-mark",
+  "queue",
+  "quotes",
+  "rabbit",
+  "racquet",
+  "radical",
+  "radio",
+  "radio-button",
+  "radioactive",
+  "rainbow",
+  "rainbow-cloud",
+  "ranking",
+  "read-cv-logo",
+  "receipt",
+  "receipt-x",
+  "record",
+  "rectangle",
+  "rectangle-dashed",
+  "recycle",
+  "reddit-logo",
+  "repeat",
+  "repeat-once",
+  "replit-logo",
+  "resize",
+  "rewind",
+  "rewind-circle",
+  "road-horizon",
+  "robot",
+  "rocket",
+  "rocket-launch",
+  "rows",
+  "rows-plus-bottom",
+  "rows-plus-top",
+  "rss",
+  "rss-simple",
+  "rug",
+  "ruler",
+  "sailboat",
+  "scales",
+  "scan",
+  "scan-smiley",
+  "scissors",
+  "scooter",
+  "screencast",
+  "screwdriver",
+  "scribble",
+  "scribble-loop",
+  "scroll",
+  "seal",
+  "seal-check",
+  "seal-percent",
+  "seal-question",
+  "seal-warning",
+  "seat",
+  "seatbelt",
+  "security-camera",
+  "selection",
+  "selection-all",
+  "selection-background",
+  "selection-foreground",
+  "selection-inverse",
+  "selection-plus",
+  "selection-slash",
+  "shapes",
+  "share",
+  "share-fat",
+  "share-network",
+  "shield",
+  "shield-check",
+  "shield-checkered",
+  "shield-chevron",
+  "shield-plus",
+  "shield-slash",
+  "shield-star",
+  "shield-warning",
+  "shipping-container",
+  "shirt-folded",
+  "shooting-star",
+  "shopping-bag",
+  "shopping-bag-open",
+  "shopping-cart",
+  "shopping-cart-simple",
+  "shovel",
+  "shower",
+  "shrimp",
+  "shuffle",
+  "shuffle-angular",
+  "shuffle-simple",
+  "sidebar",
+  "sidebar-simple",
+  "sigma",
+  "sign-in",
+  "sign-out",
+  "signature",
+  "signpost",
+  "sim-card",
+  "siren",
+  "sketch-logo",
+  "skip-back",
+  "skip-back-circle",
+  "skip-forward",
+  "skip-forward-circle",
+  "skull",
+  "skype-logo",
+  "slack-logo",
+  "sliders",
+  "sliders-horizontal",
+  "slideshow",
+  "smiley",
+  "smiley-angry",
+  "smiley-blank",
+  "smiley-meh",
+  "smiley-melting",
+  "smiley-nervous",
+  "smiley-sad",
+  "smiley-sticker",
+  "smiley-wink",
+  "smiley-x-eyes",
+  "snapchat-logo",
+  "sneaker",
+  "sneaker-move",
+  "snowflake",
+  "soccer-ball",
+  "sock",
+  "solar-panel",
+  "solar-roof",
+  "sort-ascending",
+  "sort-descending",
+  "soundcloud-logo",
+  "spade",
+  "sparkle",
+  "speaker-hifi",
+  "speaker-high",
+  "speaker-low",
+  "speaker-none",
+  "speaker-simple-high",
+  "speaker-simple-low",
+  "speaker-simple-none",
+  "speaker-simple-slash",
+  "speaker-simple-x",
+  "speaker-slash",
+  "speaker-x",
+  "speedometer",
+  "sphere",
+  "spinner",
+  "spinner-ball",
+  "spinner-gap",
+  "spiral",
+  "split-horizontal",
+  "split-vertical",
+  "spotify-logo",
+  "spray-bottle",
+  "square",
+  "square-half",
+  "square-half-bottom",
+  "square-logo",
+  "square-split-horizontal",
+  "square-split-vertical",
+  "squares-four",
+  "stack",
+  "stack-minus",
+  "stack-overflow-logo",
+  "stack-plus",
+  "stack-simple",
+  "stairs",
+  "stamp",
+  "standard-definition",
+  "star",
+  "star-and-crescent",
+  "star-four",
+  "star-half",
+  "star-of-david",
+  "steam-logo",
+  "steering-wheel",
+  "steps",
+  "stethoscope",
+  "sticker",
+  "stool",
+  "stop",
+  "stop-circle",
+  "storefront",
+  "strategy",
+  "stripe-logo",
+  "student",
+  "subset-of",
+  "subset-proper-of",
+  "subtitles",
+  "subtitles-slash",
+  "subtract",
+  "subtract-square",
+  "subway",
+  "suitcase",
+  "suitcase-rolling",
+  "suitcase-simple",
+  "sun",
+  "sun-dim",
+  "sun-horizon",
+  "sunglasses",
+  "superset-of",
+  "superset-proper-of",
+  "swap",
+  "swatches",
+  "swimming-pool",
+  "sword",
+  "synagogue",
+  "syringe",
+  "t-shirt",
+  "table",
+  "tabs",
+  "tag",
+  "tag-chevron",
+  "tag-simple",
+  "target",
+  "taxi",
+  "tea-bag",
+  "telegram-logo",
+  "television",
+  "television-simple",
+  "tennis-ball",
+  "tent",
+  "terminal",
+  "terminal-window",
+  "test-tube",
+  "text-a-underline",
+  "text-aa",
+  "text-align-center",
+  "text-align-justify",
+  "text-align-left",
+  "text-align-right",
+  "text-b",
+  "text-columns",
+  "text-h",
+  "text-h-five",
+  "text-h-four",
+  "text-h-one",
+  "text-h-six",
+  "text-h-three",
+  "text-h-two",
+  "text-indent",
+  "text-italic",
+  "text-outdent",
+  "text-strikethrough",
+  "text-subscript",
+  "text-superscript",
+  "text-t",
+  "text-t-slash",
+  "text-underline",
+  "textbox",
+  "thermometer",
+  "thermometer-cold",
+  "thermometer-hot",
+  "thermometer-simple",
+  "threads-logo",
+  "three-d",
+  "thumbs-down",
+  "thumbs-up",
+  "ticket",
+  "tidal-logo",
+  "tiktok-logo",
+  "tilde",
+  "timer",
+  "tip-jar",
+  "tipi",
+  "tire",
+  "toggle-left",
+  "toggle-right",
+  "toilet",
+  "toilet-paper",
+  "toolbox",
+  "tooth",
+  "tornado",
+  "tote",
+  "tote-simple",
+  "towel",
+  "tractor",
+  "trademark",
+  "trademark-registered",
+  "traffic-cone",
+  "traffic-sign",
+  "traffic-signal",
+  "train",
+  "train-regional",
+  "train-simple",
+  "tram",
+  "translate",
+  "trash",
+  "trash-simple",
+  "tray",
+  "tray-arrow-down",
+  "tray-arrow-up",
+  "treasure-chest",
+  "tree",
+  "tree-evergreen",
+  "tree-palm",
+  "tree-structure",
+  "tree-view",
+  "trend-down",
+  "trend-up",
+  "triangle",
+  "triangle-dashed",
+  "trolley",
+  "trolley-suitcase",
+  "trophy",
+  "truck",
+  "truck-trailer",
+  "tumblr-logo",
+  "twitch-logo",
+  "twitter-logo",
+  "umbrella",
+  "umbrella-simple",
+  "union",
+  "unite",
+  "unite-square",
+  "upload",
+  "upload-simple",
+  "usb",
+  "user",
+  "user-check",
+  "user-circle",
+  "user-circle-check",
+  "user-circle-dashed",
+  "user-circle-gear",
+  "user-circle-minus",
+  "user-circle-plus",
+  "user-focus",
+  "user-gear",
+  "user-list",
+  "user-minus",
+  "user-plus",
+  "user-rectangle",
+  "user-sound",
+  "user-square",
+  "user-switch",
+  "users",
+  "users-four",
+  "users-three",
+  "van",
+  "vault",
+  "vector-three",
+  "vector-two",
+  "vibrate",
+  "video",
+  "video-camera",
+  "video-camera-slash",
+  "video-conference",
+  "vignette",
+  "vinyl-record",
+  "virtual-reality",
+  "virus",
+  "visor",
+  "voicemail",
+  "volleyball",
+  "wall",
+  "wallet",
+  "warehouse",
+  "warning",
+  "warning-circle",
+  "warning-diamond",
+  "warning-octagon",
+  "washing-machine",
+  "watch",
+  "wave-sawtooth",
+  "wave-sine",
+  "wave-square",
+  "wave-triangle",
+  "waveform",
+  "waveform-slash",
+  "waves",
+  "webcam",
+  "webcam-slash",
+  "webhooks-logo",
+  "wechat-logo",
+  "whatsapp-logo",
+  "wheelchair",
+  "wheelchair-motion",
+  "wifi-high",
+  "wifi-low",
+  "wifi-medium",
+  "wifi-none",
+  "wifi-slash",
+  "wifi-x",
+  "wind",
+  "windmill",
+  "windows-logo",
+  "wine",
+  "wrench",
+  "x",
+  "x-circle",
+  "x-logo",
+  "x-square",
+  "yarn",
+  "yin-yang",
+  "youtube-logo",
+];
+
+const appearances = ["thin", "light", "regular", "bold", "fill", "duotone"];
+
+// Helper function to convert kebab-case to PascalCase (matching Phosphor icon export names)
+function toPascalCase(str) {
+  return str
+    .split(/(?=[A-Z])|[-_\s]/)
+    .map((part) => part.charAt(0).toUpperCase() + part.slice(1).toLowerCase())
+    .join("");
+}
+
+export default function IconDemo() {
+  const [searchTerm, setSearchTerm] = useState("");
+  const [selectedAppearance, setSelectedAppearance] = useState("regular");
+
+  // Filter icons based on search term
+  const filteredIcons = useMemo(() => {
+    if (!searchTerm.trim()) {
+      return allIconNames;
+    }
+    return allIconNames.filter((iconName) =>
+      iconName.toLowerCase().includes(searchTerm.toLowerCase()),
+    );
+  }, [searchTerm]);
+
+  return (
+    <section className="page page--icons">
+      <header className="page__header">
+        <div className="page__header-container">
+          <Breadcrumb />
+          <div className="page__header-info">
+            <div className="page__header-content">
+              <h1 className="page__header-title">Icon Gallery</h1>
+              <p className="page__header-description">
+                Browse all {allIconNames.length} Phosphor icons available in the
+            design system. Use the search to find specific icons. Icons can be
+            customized with different weights and sizes.
+              </p>
+            </div>
+            <div className="page__header-metadata">
+              <div className="page__metadata-row">
+                <p className="page__metadata-label">Author</p>
+                <a
+                  href="https://chgit.slack.com/team/U06V9C0K06S"
+                  className="page__metadata-link"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  @Michael-Stevens
+                </a>
+              </div>
+              <div className="page__metadata-row">
+                <p className="page__metadata-label">Last updated</p>
+                <p className="page__metadata-value">{formatLastUpdated()}</p>
+              </div>
+              <div className="page__metadata-row">
+                <p className="page__metadata-label">Version</p>
+                <Flex direction="row" gap="8" alignItems="center">
+                  <p className="page__metadata-value">1.0.0</p>
+                  <span className="page__version-badge">BETA</span>
+                </Flex>
+              </div>
+            </div>
+          </div>
+        </div>
+      </header>
+
+      <main className="page__content">
+        <div className="page__examples-section">
+          <div className="demo-group">
+            <h2 className="demo-group__heading">Icon Search</h2>
+            <p className="demo-group__description">
+              Search through all available icons by name. Icons are from the Phosphor icon library.
+            </p>
+            <div style={{ marginBottom: "24px" }}>
+              <input
+                type="text"
+                placeholder="Search icons..."
+                value={searchTerm}
+                onChange={(e) => setSearchTerm(e.target.value)}
+                style={{
+                  width: "100%",
+                  maxWidth: "400px",
+                  padding: "12px 16px",
+                  border: "1px solid var(--uds-border-primary)",
+                  borderRadius: "8px",
+                  fontSize: "14px",
+                }}
+              />
+            </div>
+            <div style={{ marginBottom: "24px" }}>
+              <label style={{ display: "block", marginBottom: "8px", fontSize: "14px", color: "var(--uds-text-secondary)" }}>
+                Appearance:
+              </label>
+              <Flex direction="row" gap="8" wrap={true}>
+                {appearances.map((appearance) => (
+                  <button
+                    key={appearance}
+                    onClick={() => setSelectedAppearance(appearance)}
+                    style={{
+                      padding: "8px 16px",
+                      border: `1px solid ${selectedAppearance === appearance ? "var(--uds-border-brand-primary)" : "var(--uds-border-primary)"}`,
+                      borderRadius: "4px",
+                      background: selectedAppearance === appearance ? "var(--uds-surface-brand-secondary)" : "var(--uds-surface-primary)",
+                      color: selectedAppearance === appearance ? "var(--uds-text-brand-primary)" : "var(--uds-text-primary)",
+                      cursor: "pointer",
+                      fontSize: "14px",
+                    }}
+                  >
+                    {appearance}
+                  </button>
+                ))}
+              </Flex>
+            </div>
+            <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(120px, 1fr))", gap: "16px" }}>
+              {filteredIcons.slice(0, 100).map((iconName) => (
+                <Flex
+                  key={iconName}
+                  direction="column"
+                  gap="8"
+                  alignItems="center"
+                  style={{
+                    padding: "16px",
+                    border: "1px solid var(--uds-border-secondary)",
+                    borderRadius: "8px",
+                    background: "var(--uds-surface-primary)",
+                    cursor: "pointer",
+                    transition: "all 0.2s ease",
+                  }}
+                  onMouseEnter={(e) => {
+                    e.currentTarget.style.background = "var(--uds-surface-secondary)";
+                  }}
+                  onMouseLeave={(e) => {
+                    e.currentTarget.style.background = "var(--uds-surface-primary)";
+                  }}
+                >
+                  <Icon name={iconName} size={24} appearance={selectedAppearance} />
+                  <span style={{ fontSize: "11px", color: "var(--uds-text-secondary)", textAlign: "center", wordBreak: "break-word" }}>
+                    {iconName}
+                  </span>
+                </Flex>
+              ))}
+            </div>
+            {filteredIcons.length > 100 && (
+              <p style={{ marginTop: "24px", fontSize: "14px", color: "var(--uds-text-secondary)" }}>
+                Showing first 100 of {filteredIcons.length} matching icons. Refine your search to see more.
+              </p>
+            )}
+          </div>
+        </div>
+
+        <Divider variant="solid" />
+      </main>
+    </section>
+  );
+}