> ## Documentation Index
> Fetch the complete documentation index at: https://withseismic.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Glyphs & Unicode Characters

> Browse and copy unicode characters, symbols, and special glyphs

export const GlyphsGrid = () => {
  const [searchTerm, setSearchTerm] = useState("");
  const [selectedCategory, setSelectedCategory] = useState("all");
  const [copiedGlyph, setCopiedGlyph] = useState(null);
  const [characterChain, setCharacterChain] = useState("");
  const [copiedChain, setCopiedChain] = useState(false);
  const [hoveredGlyph, setHoveredGlyph] = useState(null);
  const [tooltipPosition, setTooltipPosition] = useState({
    x: 0,
    y: 0
  });
  const categoryGridConfig = {
    tableFlip: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3"
  };
  const glyphCategories = {
    arrows: {
      name: "Arrows",
      glyphs: [{
        char: "→",
        code: "U+2192",
        name: "Rightwards Arrow"
      }, {
        char: "←",
        code: "U+2190",
        name: "Leftwards Arrow"
      }, {
        char: "↑",
        code: "U+2191",
        name: "Upwards Arrow"
      }, {
        char: "↓",
        code: "U+2193",
        name: "Downwards Arrow"
      }, {
        char: "↔",
        code: "U+2194",
        name: "Left Right Arrow"
      }, {
        char: "↕",
        code: "U+2195",
        name: "Up Down Arrow"
      }, {
        char: "↖",
        code: "U+2196",
        name: "North West Arrow"
      }, {
        char: "↗",
        code: "U+2197",
        name: "North East Arrow"
      }, {
        char: "↘",
        code: "U+2198",
        name: "South East Arrow"
      }, {
        char: "↙",
        code: "U+2199",
        name: "South West Arrow"
      }, {
        char: "⇒",
        code: "U+21D2",
        name: "Rightwards Double Arrow"
      }, {
        char: "⇐",
        code: "U+21D0",
        name: "Leftwards Double Arrow"
      }, {
        char: "⇑",
        code: "U+21D1",
        name: "Upwards Double Arrow"
      }, {
        char: "⇓",
        code: "U+21D3",
        name: "Downwards Double Arrow"
      }, {
        char: "⇔",
        code: "U+21D4",
        name: "Left Right Double Arrow"
      }, {
        char: "⇕",
        code: "U+21D5",
        name: "Up Down Double Arrow"
      }]
    },
    math: {
      name: "Mathematical",
      glyphs: [{
        char: "+",
        code: "U+002B",
        name: "Plus Sign"
      }, {
        char: "−",
        code: "U+2212",
        name: "Minus Sign"
      }, {
        char: "×",
        code: "U+00D7",
        name: "Multiplication Sign"
      }, {
        char: "÷",
        code: "U+00F7",
        name: "Division Sign"
      }, {
        char: "=",
        code: "U+003D",
        name: "Equals Sign"
      }, {
        char: "≠",
        code: "U+2260",
        name: "Not Equal To"
      }, {
        char: "<",
        code: "U+003C",
        name: "Less-Than Sign"
      }, {
        char: ">",
        code: "U+003E",
        name: "Greater-Than Sign"
      }, {
        char: "≤",
        code: "U+2264",
        name: "Less-Than Or Equal To"
      }, {
        char: "≥",
        code: "U+2265",
        name: "Greater-Than Or Equal To"
      }, {
        char: "±",
        code: "U+00B1",
        name: "Plus-Minus Sign"
      }, {
        char: "∞",
        code: "U+221E",
        name: "Infinity"
      }, {
        char: "∑",
        code: "U+2211",
        name: "N-Ary Summation"
      }, {
        char: "√",
        code: "U+221A",
        name: "Square Root"
      }, {
        char: "∫",
        code: "U+222B",
        name: "Integral"
      }, {
        char: "π",
        code: "U+03C0",
        name: "Greek Small Letter Pi"
      }]
    },
    currency: {
      name: "Currency",
      glyphs: [{
        char: "$",
        code: "U+0024",
        name: "Dollar Sign"
      }, {
        char: "€",
        code: "U+20AC",
        name: "Euro Sign"
      }, {
        char: "£",
        code: "U+00A3",
        name: "Pound Sign"
      }, {
        char: "¥",
        code: "U+00A5",
        name: "Yen Sign"
      }, {
        char: "¢",
        code: "U+00A2",
        name: "Cent Sign"
      }, {
        char: "₹",
        code: "U+20B9",
        name: "Indian Rupee Sign"
      }, {
        char: "₽",
        code: "U+20BD",
        name: "Ruble Sign"
      }, {
        char: "₩",
        code: "U+20A9",
        name: "Won Sign"
      }, {
        char: "₪",
        code: "U+20AA",
        name: "New Sheqel Sign"
      }, {
        char: "₫",
        code: "U+20AB",
        name: "Dong Sign"
      }, {
        char: "₱",
        code: "U+20B1",
        name: "Peso Sign"
      }, {
        char: "₨",
        code: "U+20A8",
        name: "Rupee Sign"
      }]
    },
    punctuation: {
      name: "Punctuation",
      glyphs: [{
        char: "•",
        code: "U+2022",
        name: "Bullet"
      }, {
        char: "·",
        code: "U+00B7",
        name: "Middle Dot"
      }, {
        char: "…",
        code: "U+2026",
        name: "Horizontal Ellipsis"
      }, {
        char: "—",
        code: "U+2014",
        name: "Em Dash"
      }, {
        char: "–",
        code: "U+2013",
        name: "En Dash"
      }, {
        char: '"',
        code: "U+201C",
        name: "Left Double Quotation Mark"
      }, {
        char: '"',
        code: "U+201D",
        name: "Right Double Quotation Mark"
      }, {
        char: "'",
        code: "U+2018",
        name: "Left Single Quotation Mark"
      }, {
        char: "'",
        code: "U+2019",
        name: "Right Single Quotation Mark"
      }, {
        char: "«",
        code: "U+00AB",
        name: "Left-Pointing Double Angle Quotation Mark"
      }, {
        char: "»",
        code: "U+00BB",
        name: "Right-Pointing Double Angle Quotation Mark"
      }, {
        char: "¿",
        code: "U+00BF",
        name: "Inverted Question Mark"
      }, {
        char: "¡",
        code: "U+00A1",
        name: "Inverted Exclamation Mark"
      }, {
        char: "§",
        code: "U+00A7",
        name: "Section Sign"
      }, {
        char: "¶",
        code: "U+00B6",
        name: "Pilcrow Sign"
      }, {
        char: "†",
        code: "U+2020",
        name: "Dagger"
      }]
    },
    symbols: {
      name: "Symbols",
      glyphs: [{
        char: "©",
        code: "U+00A9",
        name: "Copyright Sign"
      }, {
        char: "®",
        code: "U+00AE",
        name: "Registered Sign"
      }, {
        char: "™",
        code: "U+2122",
        name: "Trade Mark Sign"
      }, {
        char: "℅",
        code: "U+2105",
        name: "Care Of"
      }, {
        char: "℮",
        code: "U+212E",
        name: "Estimated Symbol"
      }, {
        char: "°",
        code: "U+00B0",
        name: "Degree Sign"
      }, {
        char: "℃",
        code: "U+2103",
        name: "Degree Celsius"
      }, {
        char: "℉",
        code: "U+2109",
        name: "Degree Fahrenheit"
      }, {
        char: "@",
        code: "U+0040",
        name: "Commercial At"
      }, {
        char: "#",
        code: "U+0023",
        name: "Number Sign"
      }, {
        char: "&",
        code: "U+0026",
        name: "Ampersand"
      }, {
        char: "%",
        code: "U+0025",
        name: "Percent Sign"
      }, {
        char: "‰",
        code: "U+2030",
        name: "Per Mille Sign"
      }, {
        char: "№",
        code: "U+2116",
        name: "Numero Sign"
      }, {
        char: "℞",
        code: "U+211E",
        name: "Prescription Take"
      }, {
        char: "℅",
        code: "U+2105",
        name: "Care Of"
      }]
    },
    shapes: {
      name: "Shapes",
      glyphs: [{
        char: "●",
        code: "U+25CF",
        name: "Black Circle"
      }, {
        char: "○",
        code: "U+25CB",
        name: "White Circle"
      }, {
        char: "■",
        code: "U+25A0",
        name: "Black Square"
      }, {
        char: "□",
        code: "U+25A1",
        name: "White Square"
      }, {
        char: "▲",
        code: "U+25B2",
        name: "Black Up-Pointing Triangle"
      }, {
        char: "△",
        code: "U+25B3",
        name: "White Up-Pointing Triangle"
      }, {
        char: "▼",
        code: "U+25BC",
        name: "Black Down-Pointing Triangle"
      }, {
        char: "▽",
        code: "U+25BD",
        name: "White Down-Pointing Triangle"
      }, {
        char: "◆",
        code: "U+25C6",
        name: "Black Diamond"
      }, {
        char: "◇",
        code: "U+25C7",
        name: "White Diamond"
      }, {
        char: "★",
        code: "U+2605",
        name: "Black Star"
      }, {
        char: "☆",
        code: "U+2606",
        name: "White Star"
      }, {
        char: "♠",
        code: "U+2660",
        name: "Black Spade Suit"
      }, {
        char: "♣",
        code: "U+2663",
        name: "Black Club Suit"
      }, {
        char: "♥",
        code: "U+2665",
        name: "Black Heart Suit"
      }, {
        char: "♦",
        code: "U+2666",
        name: "Black Diamond Suit"
      }]
    },
    greek: {
      name: "Greek Letters",
      glyphs: [{
        char: "α",
        code: "U+03B1",
        name: "Greek Small Letter Alpha"
      }, {
        char: "β",
        code: "U+03B2",
        name: "Greek Small Letter Beta"
      }, {
        char: "γ",
        code: "U+03B3",
        name: "Greek Small Letter Gamma"
      }, {
        char: "δ",
        code: "U+03B4",
        name: "Greek Small Letter Delta"
      }, {
        char: "ε",
        code: "U+03B5",
        name: "Greek Small Letter Epsilon"
      }, {
        char: "ζ",
        code: "U+03B6",
        name: "Greek Small Letter Zeta"
      }, {
        char: "η",
        code: "U+03B7",
        name: "Greek Small Letter Eta"
      }, {
        char: "θ",
        code: "U+03B8",
        name: "Greek Small Letter Theta"
      }, {
        char: "λ",
        code: "U+03BB",
        name: "Greek Small Letter Lamda"
      }, {
        char: "μ",
        code: "U+03BC",
        name: "Greek Small Letter Mu"
      }, {
        char: "σ",
        code: "U+03C3",
        name: "Greek Small Letter Sigma"
      }, {
        char: "φ",
        code: "U+03C6",
        name: "Greek Small Letter Phi"
      }, {
        char: "ψ",
        code: "U+03C8",
        name: "Greek Small Letter Psi"
      }, {
        char: "ω",
        code: "U+03C9",
        name: "Greek Small Letter Omega"
      }, {
        char: "Ω",
        code: "U+03A9",
        name: "Greek Capital Letter Omega"
      }, {
        char: "Σ",
        code: "U+03A3",
        name: "Greek Capital Letter Sigma"
      }]
    },
    checkmarks: {
      name: "Checkmarks & Crosses",
      glyphs: [{
        char: "✓",
        code: "U+2713",
        name: "Check Mark"
      }, {
        char: "✔",
        code: "U+2714",
        name: "Heavy Check Mark"
      }, {
        char: "✗",
        code: "U+2717",
        name: "Ballot X"
      }, {
        char: "✘",
        code: "U+2718",
        name: "Heavy Ballot X"
      }, {
        char: "☑",
        code: "U+2611",
        name: "Ballot Box with Check"
      }, {
        char: "☐",
        code: "U+2610",
        name: "Ballot Box"
      }, {
        char: "☒",
        code: "U+2612",
        name: "Ballot Box with X"
      }, {
        char: "⊕",
        code: "U+2295",
        name: "Circled Plus"
      }, {
        char: "⊖",
        code: "U+2296",
        name: "Circled Minus"
      }, {
        char: "⊗",
        code: "U+2297",
        name: "Circled Times"
      }, {
        char: "⊘",
        code: "U+2298",
        name: "Circled Division Slash"
      }, {
        char: "⊙",
        code: "U+2299",
        name: "Circled Dot Operator"
      }]
    },
    zalgo: {
      name: "Zalgo (Combining)",
      glyphs: [{
        char: "̀",
        code: "U+0300",
        name: "Combining Grave Accent"
      }, {
        char: "́",
        code: "U+0301",
        name: "Combining Acute Accent"
      }, {
        char: "̂",
        code: "U+0302",
        name: "Combining Circumflex"
      }, {
        char: "̃",
        code: "U+0303",
        name: "Combining Tilde"
      }, {
        char: "̄",
        code: "U+0304",
        name: "Combining Macron"
      }, {
        char: "̅",
        code: "U+0305",
        name: "Combining Overline"
      }, {
        char: "̆",
        code: "U+0306",
        name: "Combining Breve"
      }, {
        char: "̇",
        code: "U+0307",
        name: "Combining Dot Above"
      }, {
        char: "̈",
        code: "U+0308",
        name: "Combining Diaeresis"
      }, {
        char: "̉",
        code: "U+0309",
        name: "Combining Hook Above"
      }, {
        char: "̊",
        code: "U+030A",
        name: "Combining Ring Above"
      }, {
        char: "̋",
        code: "U+030B",
        name: "Combining Double Acute"
      }, {
        char: "̌",
        code: "U+030C",
        name: "Combining Caron"
      }, {
        char: "̍",
        code: "U+030D",
        name: "Combining Vertical Line Above"
      }, {
        char: "̎",
        code: "U+030E",
        name: "Combining Double Vertical Line Above"
      }, {
        char: "̏",
        code: "U+030F",
        name: "Combining Double Grave"
      }, {
        char: "̐",
        code: "U+0310",
        name: "Combining Candrabindu"
      }, {
        char: "̑",
        code: "U+0311",
        name: "Combining Inverted Breve"
      }, {
        char: "̒",
        code: "U+0312",
        name: "Combining Turned Comma Above"
      }, {
        char: "̓",
        code: "U+0313",
        name: "Combining Comma Above"
      }, {
        char: "̔",
        code: "U+0314",
        name: "Combining Reversed Comma Above"
      }, {
        char: "̕",
        code: "U+0315",
        name: "Combining Comma Above Right"
      }, {
        char: "̖",
        code: "U+0316",
        name: "Combining Grave Below"
      }, {
        char: "̗",
        code: "U+0317",
        name: "Combining Acute Below"
      }, {
        char: "̘",
        code: "U+0318",
        name: "Combining Left Tack Below"
      }, {
        char: "̙",
        code: "U+0319",
        name: "Combining Right Tack Below"
      }, {
        char: "̚",
        code: "U+031A",
        name: "Combining Left Angle Above"
      }, {
        char: "̛",
        code: "U+031B",
        name: "Combining Horn"
      }, {
        char: "̜",
        code: "U+031C",
        name: "Combining Left Half Ring Below"
      }, {
        char: "̝",
        code: "U+031D",
        name: "Combining Up Tack Below"
      }, {
        char: "̞",
        code: "U+031E",
        name: "Combining Down Tack Below"
      }, {
        char: "̟",
        code: "U+031F",
        name: "Combining Plus Sign Below"
      }, {
        char: "̠",
        code: "U+0320",
        name: "Combining Minus Sign Below"
      }]
    },
    boxDrawing: {
      name: "Box Drawing",
      glyphs: [{
        char: "─",
        code: "U+2500",
        name: "Box Drawings Light Horizontal"
      }, {
        char: "━",
        code: "U+2501",
        name: "Box Drawings Heavy Horizontal"
      }, {
        char: "│",
        code: "U+2502",
        name: "Box Drawings Light Vertical"
      }, {
        char: "┃",
        code: "U+2503",
        name: "Box Drawings Heavy Vertical"
      }, {
        char: "┌",
        code: "U+250C",
        name: "Box Drawings Light Down and Right"
      }, {
        char: "┐",
        code: "U+2510",
        name: "Box Drawings Light Down and Left"
      }, {
        char: "└",
        code: "U+2514",
        name: "Box Drawings Light Up and Right"
      }, {
        char: "┘",
        code: "U+2518",
        name: "Box Drawings Light Up and Left"
      }, {
        char: "├",
        code: "U+251C",
        name: "Box Drawings Light Vertical and Right"
      }, {
        char: "┤",
        code: "U+2524",
        name: "Box Drawings Light Vertical and Left"
      }, {
        char: "┬",
        code: "U+252C",
        name: "Box Drawings Light Down and Horizontal"
      }, {
        char: "┴",
        code: "U+2534",
        name: "Box Drawings Light Up and Horizontal"
      }, {
        char: "┼",
        code: "U+253C",
        name: "Box Drawings Light Vertical and Horizontal"
      }, {
        char: "╔",
        code: "U+2554",
        name: "Box Drawings Double Down and Right"
      }, {
        char: "╗",
        code: "U+2557",
        name: "Box Drawings Double Down and Left"
      }, {
        char: "╚",
        code: "U+255A",
        name: "Box Drawings Double Up and Right"
      }, {
        char: "╝",
        code: "U+255D",
        name: "Box Drawings Double Up and Left"
      }, {
        char: "║",
        code: "U+2551",
        name: "Box Drawings Double Vertical"
      }, {
        char: "═",
        code: "U+2550",
        name: "Box Drawings Double Horizontal"
      }, {
        char: "╬",
        code: "U+256C",
        name: "Box Drawings Double Vertical and Horizontal"
      }]
    },
    fractions: {
      name: "Fractions",
      glyphs: [{
        char: "½",
        code: "U+00BD",
        name: "Vulgar Fraction One Half"
      }, {
        char: "⅓",
        code: "U+2153",
        name: "Vulgar Fraction One Third"
      }, {
        char: "⅔",
        code: "U+2154",
        name: "Vulgar Fraction Two Thirds"
      }, {
        char: "¼",
        code: "U+00BC",
        name: "Vulgar Fraction One Quarter"
      }, {
        char: "¾",
        code: "U+00BE",
        name: "Vulgar Fraction Three Quarters"
      }, {
        char: "⅕",
        code: "U+2155",
        name: "Vulgar Fraction One Fifth"
      }, {
        char: "⅖",
        code: "U+2156",
        name: "Vulgar Fraction Two Fifths"
      }, {
        char: "⅗",
        code: "U+2157",
        name: "Vulgar Fraction Three Fifths"
      }, {
        char: "⅘",
        code: "U+2158",
        name: "Vulgar Fraction Four Fifths"
      }, {
        char: "⅙",
        code: "U+2159",
        name: "Vulgar Fraction One Sixth"
      }, {
        char: "⅚",
        code: "U+215A",
        name: "Vulgar Fraction Five Sixths"
      }, {
        char: "⅐",
        code: "U+2150",
        name: "Vulgar Fraction One Seventh"
      }, {
        char: "⅛",
        code: "U+215B",
        name: "Vulgar Fraction One Eighth"
      }, {
        char: "⅜",
        code: "U+215C",
        name: "Vulgar Fraction Three Eighths"
      }, {
        char: "⅝",
        code: "U+215D",
        name: "Vulgar Fraction Five Eighths"
      }, {
        char: "⅞",
        code: "U+215E",
        name: "Vulgar Fraction Seven Eighths"
      }]
    },
    superscript: {
      name: "Superscript & Subscript",
      glyphs: [{
        char: "⁰",
        code: "U+2070",
        name: "Superscript Zero"
      }, {
        char: "¹",
        code: "U+00B9",
        name: "Superscript One"
      }, {
        char: "²",
        code: "U+00B2",
        name: "Superscript Two"
      }, {
        char: "³",
        code: "U+00B3",
        name: "Superscript Three"
      }, {
        char: "⁴",
        code: "U+2074",
        name: "Superscript Four"
      }, {
        char: "⁵",
        code: "U+2075",
        name: "Superscript Five"
      }, {
        char: "⁶",
        code: "U+2076",
        name: "Superscript Six"
      }, {
        char: "⁷",
        code: "U+2077",
        name: "Superscript Seven"
      }, {
        char: "⁸",
        code: "U+2078",
        name: "Superscript Eight"
      }, {
        char: "⁹",
        code: "U+2079",
        name: "Superscript Nine"
      }, {
        char: "ⁿ",
        code: "U+207F",
        name: "Superscript Latin Small Letter N"
      }, {
        char: "₀",
        code: "U+2080",
        name: "Subscript Zero"
      }, {
        char: "₁",
        code: "U+2081",
        name: "Subscript One"
      }, {
        char: "₂",
        code: "U+2082",
        name: "Subscript Two"
      }, {
        char: "₃",
        code: "U+2083",
        name: "Subscript Three"
      }, {
        char: "₄",
        code: "U+2084",
        name: "Subscript Four"
      }, {
        char: "₅",
        code: "U+2085",
        name: "Subscript Five"
      }, {
        char: "₆",
        code: "U+2086",
        name: "Subscript Six"
      }, {
        char: "₇",
        code: "U+2087",
        name: "Subscript Seven"
      }, {
        char: "₈",
        code: "U+2088",
        name: "Subscript Eight"
      }, {
        char: "₉",
        code: "U+2089",
        name: "Subscript Nine"
      }]
    },
    music: {
      name: "Music Symbols",
      glyphs: [{
        char: "♩",
        code: "U+2669",
        name: "Quarter Note"
      }, {
        char: "♪",
        code: "U+266A",
        name: "Eighth Note"
      }, {
        char: "♫",
        code: "U+266B",
        name: "Beamed Eighth Notes"
      }, {
        char: "♬",
        code: "U+266C",
        name: "Beamed Sixteenth Notes"
      }, {
        char: "♭",
        code: "U+266D",
        name: "Music Flat Sign"
      }, {
        char: "♮",
        code: "U+266E",
        name: "Music Natural Sign"
      }, {
        char: "♯",
        code: "U+266F",
        name: "Music Sharp Sign"
      }, {
        char: "𝄞",
        code: "U+1D11E",
        name: "Musical Symbol G Clef"
      }, {
        char: "𝄢",
        code: "U+1D122",
        name: "Musical Symbol F Clef"
      }, {
        char: "𝄆",
        code: "U+1D106",
        name: "Musical Symbol Left Repeat Sign"
      }, {
        char: "𝄇",
        code: "U+1D107",
        name: "Musical Symbol Right Repeat Sign"
      }, {
        char: "𝄐",
        code: "U+1D110",
        name: "Musical Symbol Fermata"
      }]
    },
    roman: {
      name: "Roman Numerals",
      glyphs: [{
        char: "Ⅰ",
        code: "U+2160",
        name: "Roman Numeral One"
      }, {
        char: "Ⅱ",
        code: "U+2161",
        name: "Roman Numeral Two"
      }, {
        char: "Ⅲ",
        code: "U+2162",
        name: "Roman Numeral Three"
      }, {
        char: "Ⅳ",
        code: "U+2163",
        name: "Roman Numeral Four"
      }, {
        char: "Ⅴ",
        code: "U+2164",
        name: "Roman Numeral Five"
      }, {
        char: "Ⅵ",
        code: "U+2165",
        name: "Roman Numeral Six"
      }, {
        char: "Ⅶ",
        code: "U+2166",
        name: "Roman Numeral Seven"
      }, {
        char: "Ⅷ",
        code: "U+2167",
        name: "Roman Numeral Eight"
      }, {
        char: "Ⅸ",
        code: "U+2168",
        name: "Roman Numeral Nine"
      }, {
        char: "Ⅹ",
        code: "U+2169",
        name: "Roman Numeral Ten"
      }, {
        char: "Ⅺ",
        code: "U+216A",
        name: "Roman Numeral Eleven"
      }, {
        char: "Ⅻ",
        code: "U+216B",
        name: "Roman Numeral Twelve"
      }, {
        char: "Ⅼ",
        code: "U+216C",
        name: "Roman Numeral Fifty"
      }, {
        char: "Ⅽ",
        code: "U+216D",
        name: "Roman Numeral One Hundred"
      }, {
        char: "Ⅾ",
        code: "U+216E",
        name: "Roman Numeral Five Hundred"
      }, {
        char: "Ⅿ",
        code: "U+216F",
        name: "Roman Numeral One Thousand"
      }]
    },
    weather: {
      name: "Weather & Nature",
      glyphs: [{
        char: "☀",
        code: "U+2600",
        name: "Black Sun with Rays"
      }, {
        char: "☁",
        code: "U+2601",
        name: "Cloud"
      }, {
        char: "☂",
        code: "U+2602",
        name: "Umbrella"
      }, {
        char: "☃",
        code: "U+2603",
        name: "Snowman"
      }, {
        char: "☄",
        code: "U+2604",
        name: "Comet"
      }, {
        char: "★",
        code: "U+2605",
        name: "Black Star"
      }, {
        char: "☆",
        code: "U+2606",
        name: "White Star"
      }, {
        char: "☇",
        code: "U+2607",
        name: "Lightning"
      }, {
        char: "☈",
        code: "U+2608",
        name: "Thunderstorm"
      }, {
        char: "☉",
        code: "U+2609",
        name: "Sun"
      }, {
        char: "☊",
        code: "U+260A",
        name: "Ascending Node"
      }, {
        char: "☋",
        code: "U+260B",
        name: "Descending Node"
      }, {
        char: "☌",
        code: "U+260C",
        name: "Conjunction"
      }, {
        char: "☍",
        code: "U+260D",
        name: "Opposition"
      }, {
        char: "☽",
        code: "U+263D",
        name: "First Quarter Moon"
      }, {
        char: "☾",
        code: "U+263E",
        name: "Last Quarter Moon"
      }, {
        char: "❄",
        code: "U+2744",
        name: "Snowflake"
      }, {
        char: "❅",
        code: "U+2745",
        name: "Tight Trifoliate Snowflake"
      }, {
        char: "❆",
        code: "U+2746",
        name: "Heavy Chevron Snowflake"
      }]
    },
    tableFlip: {
      name: "Table Flips & Kaomoji",
      glyphs: [{
        char: "(╯°□°）╯︵ ┻━┻",
        code: "Kaomoji",
        name: "Classic Table Flip"
      }, {
        char: "┬─┬ ノ( ゜-゜ノ)",
        code: "Kaomoji",
        name: "Put Table Back"
      }, {
        char: "(ノಠ益ಠ)ノ彡┻━┻",
        code: "Kaomoji",
        name: "Angry Table Flip"
      }, {
        char: "┻━┻ ︵ヽ(`Д´)ﾉ︵ ┻━┻",
        code: "Kaomoji",
        name: "Double Table Flip"
      }, {
        char: "┬─┬ノ(ಠ_ಠノ)",
        code: "Kaomoji",
        name: "Disapproval Put Back"
      }, {
        char: "(╯°Д°）╯︵/(.□ . \\)",
        code: "Kaomoji",
        name: "Person Flip"
      }, {
        char: "(ノಥ,_｣ಥ)ノ彡┻━┻",
        code: "Kaomoji",
        name: "Crying Table Flip"
      }, {
        char: "(┛◉Д◉)┛彡┻━┻",
        code: "Kaomoji",
        name: "Crazy Table Flip"
      }, {
        char: "(ﾉ≧∇≦)ﾉ ﾐ ┻━┻",
        code: "Kaomoji",
        name: "Happy Table Flip"
      }, {
        char: "(ノ￣皿￣）ノ ⌒=== ┫",
        code: "Kaomoji",
        name: "Table Throw"
      }, {
        char: "┻━┻ミ＼(≧ﾛ≦＼)",
        code: "Kaomoji",
        name: "Catch Table"
      }, {
        char: "(┛ಸ_ಸ)┛彡┻━┻",
        code: "Kaomoji",
        name: "Serious Flip"
      }, {
        char: "(╯°□°)╯︵ ƃuıʇǝʞɹɐɯ",
        code: "Kaomoji",
        name: "Marketing Flip"
      }, {
        char: "(ノ͡° ͜ʖ ͡°)ノ︵┻┻",
        code: "Kaomoji",
        name: "Lenny Table Flip"
      }, {
        char: "ʕノ•ᴥ•ʔノ ︵ ┻━┻",
        code: "Kaomoji",
        name: "Bear Table Flip"
      }, {
        char: "┬─┬ ︵ /(.□. \\）",
        code: "Kaomoji",
        name: "Table Flips You"
      }, {
        char: "(╯°□°）╯︵ ┻━┻ ︵ ╯(°□° ╯)",
        code: "Kaomoji",
        name: "Table Battle"
      }, {
        char: "(ノ°_o)ノ⌒┻━┻",
        code: "Kaomoji",
        name: "Confused Flip"
      }, {
        char: "┻━┻︵└(՞▽՞ └)",
        code: "Kaomoji",
        name: "Sneaky Flip"
      }, {
        char: "┻━┻︵└(´▽｀)┘︵┻━┻",
        code: "Kaomoji",
        name: "Dance Flip"
      }]
    }
  };
  const filteredGlyphs = useMemo(() => {
    let glyphs = [];
    if (selectedCategory === "all") {
      Object.values(glyphCategories).forEach(category => {
        glyphs = [...glyphs, ...category.glyphs];
      });
    } else {
      glyphs = glyphCategories[selectedCategory]?.glyphs || [];
    }
    if (searchTerm) {
      const lowerSearch = searchTerm.toLowerCase();
      glyphs = glyphs.filter(glyph => glyph.char.includes(searchTerm) || glyph.name.toLowerCase().includes(lowerSearch) || glyph.code.toLowerCase().includes(lowerSearch));
    }
    return glyphs;
  }, [selectedCategory, searchTerm]);
  const handleGlyphClick = async glyph => {
    setCharacterChain(prev => prev + glyph.char);
    try {
      await navigator.clipboard.writeText(glyph.char);
      setCopiedGlyph(glyph.char);
      setTimeout(() => setCopiedGlyph(null), 2000);
    } catch (err) {
      console.error("Failed to copy:", err);
    }
  };
  const copyChainToClipboard = async () => {
    try {
      await navigator.clipboard.writeText(characterChain);
      setCopiedChain(true);
      setTimeout(() => setCopiedChain(false), 2000);
    } catch (err) {
      console.error("Failed to copy chain:", err);
    }
  };
  const clearChain = () => {
    setCharacterChain("");
  };
  const handleMouseEnter = (e, glyph) => {
    const rect = e.currentTarget.getBoundingClientRect();
    setTooltipPosition({
      x: rect.left + rect.width / 2,
      y: rect.top
    });
    setHoveredGlyph(glyph);
  };
  const handleMouseLeave = () => {
    setHoveredGlyph(null);
  };
  return <div className="bg-background rounded-sm p-6 my-6 border border-neutral-500/20 shadow-sm">
      {}
      <div className="flex items-end justify-between mb-4">
        <h3 className="text-lg my-0 font-semibold text-gray-900 dark:text-gray-100">
          Unicode Character Explorer
        </h3>
        <div className="flex items-center gap-2">
          <span className="text-xs text-gray-600 dark:text-gray-400">
            {filteredGlyphs.length} glyphs
          </span>
        </div>
      </div>

      {}
      <div className="mb-4">
        <input type="text" placeholder="Search glyphs, names, or codes..." value={searchTerm} onChange={e => setSearchTerm(e.target.value)} className="w-full px-4 py-3 text-sm border border-gray-200 dark:border-neutral-500/20 rounded-sm outline-none focus:border-orange-500 dark:focus:border-orange-400 transition-colors bg-white dark:bg-neutral-800/20 text-gray-900 dark:text-gray-100" />
      </div>

      {}
      <div className="flex flex-wrap gap-2 mb-6">
        <button onClick={() => setSelectedCategory("all")} className={`px-4 py-2 text-sm font-medium rounded-sm border transition-all ${selectedCategory === "all" ? "bg-orange-500 text-white border-orange-500" : "bg-transparent text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-orange-400"}`}>
          All Categories
        </button>

        {Object.entries(glyphCategories).map(([key, category]) => <button key={key} onClick={() => setSelectedCategory(key)} className={`px-4 py-2 text-sm font-medium rounded-sm border transition-all ${selectedCategory === key ? "bg-orange-500 text-white border-orange-500" : "bg-transparent text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-orange-400"}`}>
            {category.name}
          </button>)}
      </div>

      {}
      <div className="mb-4 relative">
        <input type="text" value={characterChain} onChange={e => setCharacterChain(e.target.value)} placeholder="Click glyphs to build a chain..." className="w-full px-4 py-3 pr-32 text-sm border border-gray-200 dark:border-neutral-500/20 rounded-sm outline-none focus:border-orange-500 dark:focus:border-orange-400 transition-colors bg-white dark:bg-neutral-800/20 text-gray-900 dark:text-gray-100" />
        <div className="absolute right-2 top-1/2 -translate-y-1/2 flex gap-1">
          <button onClick={clearChain} disabled={!characterChain} className={`px-3 py-1.5 text-sm font-medium rounded-sm transition-all ${characterChain ? "bg-gray-500 text-white hover:bg-gray-600" : "bg-gray-300 text-gray-500 cursor-not-allowed"}`}>
            Clear
          </button>
          <button onClick={copyChainToClipboard} disabled={!characterChain} className={`px-3 py-1.5 text-sm font-medium rounded-sm transition-all ${copiedChain ? "bg-green-500 text-white" : characterChain ? "bg-orange-500 text-white hover:bg-orange-600" : "bg-gray-300 text-gray-500 cursor-not-allowed"}`}>
            {copiedChain ? "Copied!" : "Copy"}
          </button>
        </div>
      </div>

      {}
      {selectedCategory === "zalgo" && <div className="mb-6 p-4 bg-purple-50 dark:bg-purple-900/20 rounded-sm border border-purple-200 dark:border-purple-800">
          <div className="flex items-start gap-2">
            <span className="text-xl">⚠️</span>
            <div>
              <div className="text-sm font-semibold text-purple-700 dark:text-purple-400 mb-1">
                Zalgo / Combining Characters
              </div>
              <div className="text-xs text-purple-600 dark:text-purple-400">
                These are combining diacritical marks that stack on top of other
                characters. Type a letter first, then paste the combining
                character after it. Example: a + ̀ = à
              </div>
            </div>
          </div>
        </div>}

      {}
      <div className="relative">
        <div className={`grid gap-3 max-h-[600px] overflow-y-auto overflow-x-hidden pr-2 ${categoryGridConfig[selectedCategory] || "grid-cols-3 sm:grid-cols-4 md:grid-cols-6 lg:grid-cols-8"}`}>
        {filteredGlyphs.map((glyph, index) => {
    const charLength = glyph.char.length;
    let gridSpan = "";
    if (charLength > 15) {
      gridSpan = "col-span-3";
    } else if (charLength > 8) {
      gridSpan = "col-span-2";
    }
    if (selectedCategory === 'tableFlip') {
      gridSpan = "";
    }
    return <div key={`${glyph.code}-${index}`} onClick={() => handleGlyphClick(glyph)} onMouseEnter={e => handleMouseEnter(e, glyph)} onMouseLeave={handleMouseLeave} className={`${gridSpan} group relative aspect-square flex flex-col items-center justify-center p-2 rounded-sm border cursor-pointer transition-all text-center select-none ${copiedGlyph === glyph.char ? "bg-green-500 border-green-500 text-white" : "bg-neutral-500/5 border-neutral-500/10 hover:border-orange-400 hover:bg-orange-50 dark:hover:bg-orange-900/10"}`}>
            <div className={`${selectedCategory === "tableFlip" ? "text-xs sm:text-sm" : "text-2xl sm:text-3xl"} ${selectedCategory === "tableFlip" ? "font-mono" : ""} overflow-hidden`}>
              {glyph.char}
            </div>
            {copiedGlyph === glyph.char && <div className="absolute top-1 right-1 text-[10px] font-bold">
                Copied!
              </div>}
          </div>;
  })}
        </div>
        {}
        <div className="absolute bottom-0 left-0 right-0 h-20 pointer-events-none bg-gradient-to-t from-background to-transparent" />
      </div>

      {filteredGlyphs.length === 0 && <div className="py-12 text-center text-gray-500 dark:text-gray-400">
          <div className="text-4xl mb-3">🔍</div>
          <div className="text-lg font-medium">No glyphs found</div>
          <div className="text-sm mt-1">
            Try a different search term or category
          </div>
        </div>}

      {}
      <div className="mt-6 pt-6 border-t border-gray-200 dark:border-gray-700">
        <div className="text-sm text-gray-600 dark:text-gray-400 mb-2">
          💡 Quick Tips
        </div>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
          <div className="bg-neutral-500/5 p-3 rounded-sm border border-neutral-500/10">
            <div className="text-xs font-medium text-gray-700 dark:text-gray-300">
              HTML Usage
            </div>
            <div className="text-xs text-gray-600 dark:text-gray-400 mt-1">
              Use as &amp;#x2192; for →
            </div>
          </div>
          <div className="bg-neutral-500/5 p-3 rounded-sm border border-neutral-500/10">
            <div className="text-xs font-medium text-gray-700 dark:text-gray-300">
              CSS Usage
            </div>
            <div className="text-xs text-gray-600 dark:text-gray-400 mt-1">
              content: "\2192" for →
            </div>
          </div>
          <div className="bg-neutral-500/5 p-3 rounded-sm border border-neutral-500/10">
            <div className="text-xs font-medium text-gray-700 dark:text-gray-300">
              JavaScript
            </div>
            <div className="text-xs text-gray-600 dark:text-gray-400 mt-1">
              String.fromCharCode(0x2192)
            </div>
          </div>
        </div>
      </div>

      {}
      {hoveredGlyph && <div className="fixed px-3 py-2 bg-gray-900 dark:bg-gray-800 text-white text-xs rounded-sm z-50 min-w-[150px] shadow-lg pointer-events-none text-center" style={{
    left: `${tooltipPosition.x}px`,
    top: `${tooltipPosition.y}px`,
    transform: 'translate(-50%, calc(-100% - 8px))'
  }}>
          <div className="font-semibold mb-1 break-all">{hoveredGlyph.char}</div>
          <div className="text-gray-300">{hoveredGlyph.name}</div>
          <div className="text-gray-400 text-[10px] mt-1">{hoveredGlyph.code}</div>
        </div>}
    </div>;
};

## How can I quickly find and copy unicode characters?

<Info>
  **Quick Answer:** Use this interactive grid to browse unicode characters by category. Click any glyph to instantly copy it to your clipboard.
</Info>

<GlyphsGrid />

## How do I use the glyph explorer?

<Info>
  **Quick Answer:** Browse categories, search by name/code, click to copy. Each glyph shows its unicode code point for reference.
</Info>

1. **Browse Categories**: Select a category to filter glyphs by type (arrows, math, currency, etc.)
2. **Search**: Type in the search box to find glyphs by character, name, or unicode code
3. **Copy**: Click any glyph to instantly copy it to your clipboard
4. **Unicode Info**: Each glyph shows its unicode code point for reference

## What categories of glyphs are available?

<Info>
  **Quick Answer:** 8 main categories: Arrows, Mathematical, Currency, Punctuation, Symbols, Shapes, Greek Letters, and Checkmarks & Crosses.
</Info>

* **Arrows**: Direction indicators and navigation symbols
* **Mathematical**: Math operators and symbols
* **Currency**: International currency symbols
* **Punctuation**: Special punctuation marks and typography
* **Symbols**: Common symbols and signs
* **Shapes**: Geometric shapes and icons
* **Greek Letters**: Greek alphabet for mathematical notation
* **Checkmarks & Crosses**: Status indicators and checkboxes

## What are the best practices for using unicode characters?

<Info>
  **Quick Answer:** Search for specific characters, use unicode codes in HTML/CSS, and know that most modern fonts support these characters.
</Info>

* Use the search to quickly find specific characters
* The unicode code (e.g., U+2192) can be used in HTML as `&#x2192;`
* In CSS, use unicode characters like `content: "\2192";`
* Most modern fonts support these unicode characters

## How do glyphs break through digital monotony?

<Info>
  **Quick Answer:** Glyphs communicate directly to your brain's pattern recognition system, processing faster than words and breaking through digital content monotony.
</Info>

### The Pattern-Hungry Brain

Your brain is a pattern recognition machine. The neocortex—that wrinkled outer layer accounting for 80% of your brain's weight—contains roughly 300 million pattern recognizers, each constantly scanning for familiar shapes, symbols, and meanings. When you encounter a glyph like → or ★ or ▼, something remarkable happens: your brain processes it faster than words, triggering instant recognition without the cognitive load of reading.

This is why a simple ↗ can convey "growth" more powerfully than the word itself. It's not decoration—it's direct communication to the pattern-processing centers of the human brain.

## Why are traditional typography marks losing their impact?

<Info>
  **Quick Answer:** AI-generated content has overused traditional marks like em dashes, creating homogenization. Glyphs break this pattern by providing visual distinction.
</Info>

The em dash—once a mark of sophisticated typography—has become a casualty of AI-generated content. What was once used sparingly for dramatic pause has been democratized into mundane overuse. When every article contains perfectly placed em dashes, none of them stand out. The pattern becomes noise.

This homogenization extends beyond punctuation. As content generation accelerates, we're drowning in identical structures, predictable metaphors, and formulaic presentations. Your reader's pattern recognition system, evolved to spot anomalies and threats, begins to tune out the sameness.

## How should I strategically deploy glyphs in my content?

<Info>
  **Quick Answer:** Use glyphs strategically to break patterns and demand attention. They work through difference, not decoration, and are processed faster than text.
</Info>

Unicode characters work because they break the pattern. In a sea of letters, a ◆ demands attention. Not through size or color, but through *difference*. The visual cortex, which processes symbols before the language centers even engage, flags these glyphs as significant.

Consider how these work in practice:

**Direction Without Words**

* ← Previous consideration
* → Next logical step
* ↓ Details below
* ↗ Upward trend

**Status at a Glance**

* ✓ Completed
* ✗ Failed
* ⚠ Warning
* ● Active

**Hierarchy Through Shape**

* ▸ Primary point
  * ▹ Supporting detail
    * ▪ Minor note

## How do glyphs support the brevity principle?

<Info>
  **Quick Answer:** Glyphs compress information efficiently. A single symbol can replace verbose descriptions while respecting cognitive bandwidth.
</Info>

Glyphs excel at compression. A single ★ rating system replaces verbose quality descriptions. An ↻ implies "refresh" or "retry" without explanation. This isn't just efficiency—it's respect for your reader's cognitive bandwidth.

Research shows the brain processes iconic symbols through multiple pathways simultaneously: the visual cortex for shape recognition, the frontal cortex for meaning attribution, and the temporo-occipital junction for contextual understanding. Words travel a single, slower path through language processing centers.

## What's a real-world example of effective glyph usage?

Here's a before-and-after showing the power of strategic glyph use:

**Without Glyphs:**
"First, you need to complete the setup process. Then, move on to configuration. After that, you can begin testing. Warning: make sure to save your work frequently. If everything passes, you're ready to deploy."

**With Glyphs:**

```
→ Setup process
→ Configuration
→ Testing phase
⚠ Save work frequently
✓ Ready to deploy
```

The second version doesn't just save space—it creates a scannable, memorable structure that the brain can process in parallel rather than sequentially.

## How do glyphs perform in the attention economy?

<Info>
  **Quick Answer:** Glyphs are high-value attention tokens that bypass language processing, create visual anchors, and trigger emotional responses more effectively than text.
</Info>

In environments where attention is currency, glyphs are high-value tokens. They work because they:

1. **Bypass language processing** — Direct visual-to-meaning pathway
2. **Create visual anchors** — The eye naturally jumps to these break points
3. **Enable rapid scanning** — Information hierarchy becomes instantly visible
4. **Trigger emotional responses** — ❌ feels different than "error"
5. **Persist in memory** — Visual symbols stick better than text

## How should I use glyphs with intention?

<Info>
  **Quick Answer:** Use glyphs strategically, not decoratively. Overuse creates noise. Apply them where they amplify meaning and break patterns for attention.
</Info>

The power of glyphs lies not in their novelty but in their strategic deployment. Overuse them, and you've simply created a different kind of noise. The key is intentional contrast—using glyphs where they amplify meaning, not where they merely decorate.

Think of them as typography's precision instruments. A surgeon doesn't use a scalpel for every cut, and you shouldn't use glyphs for every emphasis. But when you need to slice through the attention barrier, when you need instant recognition, when you need to convey direction, status, or hierarchy without words—that's when these symbols transform from decoration into communication.

The next time you're crafting content that needs to stand out in the endless scroll, remember: your reader's brain evolved to spot patterns and, more importantly, pattern *breaks*. Use that to your advantage.

## Frequently Asked Questions

<AccordionGroup>
  <Accordion title="What exactly are glyphs?">
    Glyphs are visual symbols or characters that represent letters, numbers, punctuation marks, or other symbols. In digital contexts, they're unicode characters that go beyond standard ASCII text to include arrows (→), shapes (◆), mathematical symbols (∑), and thousands of other special characters.
  </Accordion>

  <Accordion title="What is Unicode and how does it work?">
    Unicode is a universal character encoding standard that assigns a unique code point to every character in every language, plus symbols and glyphs. It allows computers to consistently represent and manipulate text. Each character has a code like U+2192 for →.
  </Accordion>

  <Accordion title="How do I type unicode characters on my keyboard?">
    **Windows**: Hold Alt and type the decimal code on numpad, or use Win+. for emoji picker
    **Mac**: Press Control+Command+Space for character viewer, or use Option+key combinations
    **Linux**: Press Ctrl+Shift+U, type the hex code, press Enter
    **Mobile**: Long-press keys for variations, or use emoji/symbol keyboards
  </Accordion>

  <Accordion title="Can I use glyphs in email subjects and social media?">
    Yes, but carefully. Most platforms support unicode, but overuse can trigger spam filters. Test deliverability first. Some effective uses: ✓ for confirmations, → for CTAs, ⚠ for urgency. Avoid in professional/formal contexts.
  </Accordion>

  <Accordion title="Which fonts support the most unicode characters?">
    Modern system fonts like Arial, Helvetica, and web fonts like Google Fonts generally support extensive unicode character sets. For comprehensive coverage, consider fonts like Noto Sans or DejaVu Sans.
  </Accordion>

  <Accordion title="How do I use unicode characters in different programming languages?">
    In HTML: `&#x2192;` or `&rarr;`, in CSS: `content: "\2192";`, in JavaScript: `"\u2192"`, in Python: `"\u2192"`. Most languages support unicode literals with `\u` notation.
  </Accordion>

  <Accordion title="Are there accessibility concerns with using glyphs?">
    Yes. Screen readers may not interpret decorative glyphs meaningfully. Use semantic HTML elements where possible, and provide alt text or aria-labels for important symbols.
  </Accordion>

  <Accordion title="How many glyphs should I use in a single document?">
    Follow the "intentional contrast" principle. Use 2-3 different glyphs per document maximum. Overuse creates visual noise rather than clarity.
  </Accordion>

  <Accordion title="What's the difference between unicode and emoji?">
    Emoji are a subset of unicode characters. Unicode includes text symbols, mathematical notation, arrows, and other glyphs beyond the colorful emoji you see on phones.
  </Accordion>

  <Accordion title="Do glyphs work across all devices and browsers?">
    Most modern browsers and devices support standard unicode characters. However, newer or specialized glyphs might not render consistently. Test across your target platforms.
  </Accordion>

  <Accordion title="How do glyphs impact SEO and content searchability?">
    Search engines generally ignore decorative unicode characters for indexing. Use glyphs for visual enhancement, not as replacements for searchable keywords.
  </Accordion>

  <Accordion title="Can I create custom glyphs or modify existing ones?">
    You cannot modify unicode characters themselves, but you can create custom icon fonts or SVG symbols. Unicode characters are standardized across platforms.
  </Accordion>

  <Accordion title="What's the psychological impact of using too many glyphs?">
    Overuse creates "glyph fatigue" where symbols lose their attention-grabbing power. Your brain starts filtering them out as noise rather than meaningful signals.
  </Accordion>

  <Accordion title="How do I choose the right glyph for my message?">
    Match the glyph's cultural meaning to your intent. Arrows for direction/progress, checkmarks for completion, warning symbols for caution. Consider your audience's cultural context.
  </Accordion>

  <Accordion title="What's the difference between a glyph, character, and font?">
    A **character** is the abstract idea (letter 'A'), a **glyph** is the visual representation of that character, and a **font** is a collection of glyphs in a consistent style. The same character can have different glyphs in different fonts.
  </Accordion>

  <Accordion title="Are there any glyphs I should avoid using?">
    Avoid culturally sensitive symbols, religious icons in secular contexts, and glyphs that render inconsistently across platforms. Test critical glyphs on target devices. Some symbols have different meanings in different cultures.
  </Accordion>

  <Accordion title="How do I find the unicode code for a specific glyph?">
    Use this tool's search feature, or check unicode-table.com, shapecatcher.com (draw to find), or your OS character viewer. The code is usually shown as U+XXXX where XXXX is the hexadecimal value.
  </Accordion>

  <Accordion title="Can glyphs be read by screen readers for accessibility?">
    It depends. Some unicode characters have semantic meanings that screen readers announce (like '→' as "right arrow"), but many decorative glyphs are skipped or announced unhelpfully. Always provide text alternatives for important information.
  </Accordion>
</AccordionGroup>
