Icon Preview

Every size, brand state and character-length variant rendered by <Icon />. Hidden from public navigation; useful for spotting rendering or alignment issues when changing the brand mark.

Brand logo (the new )

isBrand={true}. The component only styles sm and lg for the brand variant — md falls back to the default brand styling.

size=sm
size=md (no dedicated style)
size=lg (footer logo)

Tool icon — every size × every length class

Default isBrand={false}. Symbol length triggers the internal .single, .double and .triple modifiers (which adjust font-size and letter-spacing).

size=sm
A single (1 char)
A
AB double (2 chars)
AB
ABC triple (3 chars)
ABC
unicode glyph
𝕏 wide glyph
𝕏
?= symbol + char
?=
size=md
A single (1 char)
A
AB double (2 chars)
AB
ABC triple (3 chars)
ABC
unicode glyph
𝕏 wide glyph
𝕏
?= symbol + char
?=
size=lg
A single (1 char)
A
AB double (2 chars)
AB
ABC triple (3 chars)
ABC
unicode glyph
𝕏 wide glyph
𝕏
?= symbol + char
?=

Brand vs non-brand at every size

size=sm
isBrand=false
isBrand=true
size=md
isBrand=false
isBrand=true
size=lg
isBrand=false
isBrand=true

Live tool symbols

Every symbol currently registered in site.ts, rendered at md. Useful for spotting any glyph that doesn't vertically center cleanly.

W+ Word Count
W+
C+ Character Count
C+
GPT GPT-4 Prompt
GPT
GPT GPT-5 Prompt
GPT
In LinkedIn Post
In
f Facebook Post
f
𝕏 X Post
𝕏
𝕏 X Premium Post
𝕏
S+ Sentence Count
S+
W# Word Frequency
W#
Rt Reading Time
Rt
Remove Spaces
Remove Breaks
" Remove Duplicates
"
Remove Empty Lines
<> Strip HTML
<>
Find/Replace
Ab Alphabetical Sort
Ab
12 Numerical Sort
12
↑↓ Reverse List
↑↓
Shuffle List
|‥| Sort by Length
|‥|
lc lower case
lc
UC UPPER CASE
UC
cC camelCase
cC
k-c kebab-case
k-c
PC PascalCase
PC
s_c snake_case
s_c
Sᶜ Superscript
Sᶜ
cba Text Reverser
cba
Add Line Number
Remove Line Numbers
¿? Random Number
¿?
¿? Random Number
¿?
Uu UUID
Uu
•• Password
••
// Encode URL
//
\\ Decode URL
\\
?= Parse URL
?=
GA⁴ GA4 URL Builder
GA⁴
&= Build URL
&=
{} JSON Format
{}
→& HTML Entities
→&
&→ HTML Decode
&→
→B Base64 Encode
→B
B→ Base64 Decode
B→
# Hash
#
0b Number Base
0b
JW JWT Decode
JW
Li Lorem Ipsum
Li
- Slug Generator
-
Icon Preview

Background swatches

The brand variant uses a dark gradient; check legibility against light and dark page backgrounds.

on light
on dark
on brand