<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Cute Symbols</title>
    <description>The latest articles on DEV Community by Cute Symbols (@cutesymbols10).</description>
    <link>https://dev.to/cutesymbols10</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4243335%2Fc0a95404-c614-455d-b20e-af6f87dfd538.png</url>
      <title>DEV Community: Cute Symbols</title>
      <link>https://dev.to/cutesymbols10</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/cutesymbols10"/>
    <language>en</language>
    <item>
      <title>Unicode Symbols in Usernames and Bios — A Practical Guide for Developers</title>
      <dc:creator>Cute Symbols</dc:creator>
      <pubDate>Fri, 13 Nov 2026 17:36:40 +0000</pubDate>
      <link>https://dev.to/cutesymbols10/unicode-symbols-in-usernames-and-bios-a-practical-guide-for-developers-m8i</link>
      <guid>https://dev.to/cutesymbols10/unicode-symbols-in-usernames-and-bios-a-practical-guide-for-developers-m8i</guid>
      <description>&lt;p&gt;Every day, millions of users decorate their Discord names, Instagram bios and game profiles with hearts, stars, sparkles and kaomoji like &lt;code&gt;♡&lt;/code&gt;, &lt;code&gt;✧&lt;/code&gt; and &lt;code&gt;(˶ᵔᵕᵔ˶)&lt;/code&gt;. If you build anything with profiles, comments or display names, you will meet these characters in production — usually as a bug report.&lt;/p&gt;

&lt;p&gt;This guide explains what these symbols actually are, where they work, where they break, and how to handle them safely in your code.&lt;/p&gt;

&lt;h2&gt;
  
  
  They are not images or fonts — they are just text
&lt;/h2&gt;

&lt;p&gt;A heart pasted into a bio is an ordinary Unicode code point, exactly like the letter &lt;code&gt;A&lt;/code&gt;:&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Character&lt;/th&gt;
&lt;th&gt;Code point&lt;/th&gt;
&lt;th&gt;Name&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;♥&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;U+2665&lt;/td&gt;
&lt;td&gt;Black Heart Suit&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;★&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;U+2605&lt;/td&gt;
&lt;td&gt;Black Star&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;✧&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;U+2727&lt;/td&gt;
&lt;td&gt;White Four-Pointed Star&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;♪&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;U+266A&lt;/td&gt;
&lt;td&gt;Eighth Note&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;♡&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;U+2661&lt;/td&gt;
&lt;td&gt;White Heart Suit&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;p&gt;That is why copy and paste works everywhere: the clipboard carries the character itself, not a picture. Whatever app receives it asks the system font to draw it. If the font has the glyph, it renders; if not, the user sees a hollow box (&lt;code&gt;□&lt;/code&gt;) — the famous "tofu". Render support differs between Windows, Android and iOS, which is why a symbol that looks perfect on your phone can arrive as an empty square on someone else's screen.&lt;/p&gt;

&lt;h2&gt;
  
  
  The three families you will see
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;1. Standalone symbols.&lt;/strong&gt; Single characters: hearts, stars, arrows, crowns, musical notes. Safest of the three — one character, one glyph.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;2. Kaomoji.&lt;/strong&gt; Japanese text faces built from several characters, like &lt;code&gt;(｡◕‿◕｡)&lt;/code&gt; or &lt;code&gt;ʕ•ᴥ•ʔ&lt;/code&gt;. Still plain text, but many code points — string length and truncation start to matter here.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;3. Combining marks.&lt;/strong&gt; Characters like Zalgo text stack dozens of combining diacritics on one base letter: &lt;code&gt;t̴̢̧̛h̶̝i̶s̶&lt;/code&gt;. One visible "letter" can be 30+ code points. This is where naive counting, truncation and layout code goes to die.&lt;/p&gt;

&lt;h2&gt;
  
  
  Platform rules are not consistent
&lt;/h2&gt;

&lt;p&gt;If your app lets users import or mirror profiles from other platforms, expect every platform to treat symbols differently:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Discord&lt;/strong&gt; — display names accept most symbols; usernames are restricted to lowercase letters, numbers and a few marks.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Instagram / TikTok&lt;/strong&gt; — bios and display names accept almost anything that renders; usernames stay ASCII-only.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Roblox&lt;/strong&gt; — display names can contain symbols (free to change once a week); usernames are letters, numbers and a single underscore.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;X (Twitter)&lt;/strong&gt; — display names are permissive, handles are not.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The pattern: &lt;strong&gt;display surfaces are permissive, identifiers are strict.&lt;/strong&gt; Mirror that in your own product.&lt;/p&gt;

&lt;h2&gt;
  
  
  Four developer pitfalls (learned the hard way)
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;1. &lt;code&gt;.length&lt;/code&gt; lies to you.&lt;/strong&gt;&lt;br&gt;
In JavaScript, &lt;code&gt;"♥".length&lt;/code&gt; is 1, but &lt;code&gt;"𖹭".length&lt;/code&gt; is 2 (a surrogate pair) and a kaomoji can be 10+. Count &lt;em&gt;grapheme clusters&lt;/em&gt; — what the user perceives as one character:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="n"&gt;segmenter&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;Intl&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nc"&gt;Segmenter&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s1"&gt;'en'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="n"&gt;granularity&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="s1"&gt;'grapheme'&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="n"&gt;count&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;segmenter&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;segment&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s1"&gt;'(｡◕‿◕｡)'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;length&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="c1"&gt;// what the user sees&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;2. Normalize before you compare or search.&lt;/strong&gt;&lt;br&gt;
The same visible text can be stored in different Unicode normalization forms. Normalize with NFC before storing, and keep a "plain" version for search: strip decorations and fold styled letters back to ASCII, or a user named &lt;code&gt;★彡[Name]彡★&lt;/code&gt; will never be found by searching "Name".&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="n"&gt;plain&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;name&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;normalize&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s1"&gt;'NFKD'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;replace&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="o"&gt;/&lt;/span&gt;\&lt;span class="n"&gt;p&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="no"&gt;M&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="o"&gt;/&lt;/span&gt;&lt;span class="n"&gt;gu&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="s1"&gt;''&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;3. Validation: use Unicode property escapes.&lt;/strong&gt;&lt;br&gt;
Instead of blacklisting characters one by one, decide what you &lt;em&gt;allow&lt;/em&gt;:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// Letters, numbers, spaces and common symbols — in any language&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="n"&gt;ok&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="o"&gt;/^&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;\&lt;span class="n"&gt;p&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="no"&gt;L&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;\&lt;span class="n"&gt;p&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="no"&gt;N&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;\&lt;span class="n"&gt;p&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="no"&gt;S&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="p"&gt;]&lt;/span&gt;&lt;span class="o"&gt;+&lt;/span&gt;$&lt;span class="o"&gt;/&lt;/span&gt;&lt;span class="n"&gt;u&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;test&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;displayName&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;4. Your database needs real UTF-8.&lt;/strong&gt;&lt;br&gt;
On MySQL, that means &lt;code&gt;utf8mb4&lt;/code&gt; — plain &lt;code&gt;utf8&lt;/code&gt; silently drops or chokes on characters outside the Basic Multilingual Plane. Many "rare" symbols and all emoji live out there.&lt;/p&gt;

&lt;h2&gt;
  
  
  Where to find symbols that actually render
&lt;/h2&gt;

&lt;p&gt;When users ask "where do I get a star that works in my bio?", they need characters with wide font support, not exotic code points that tofu on half the devices. I keep a bookmark on &lt;a href="https://cutesymbols.io" rel="noopener noreferrer"&gt;Cute Symbols&lt;/a&gt; for this — it is a free click-to-copy library of 1,000+ symbols in 42 categories (hearts, stars, arrows, kaomoji, dot art and more), organised by use case. Their &lt;a href="https://cutesymbols.io/discord-symbols/" rel="noopener noreferrer"&gt;Discord symbols collection&lt;/a&gt;, for example, is handy when testing how decorated names behave, because everything there is plain copyable text rather than images.&lt;/p&gt;

&lt;p&gt;The rule of thumb when picking symbols for your own UI or test data: prefer code points from the BMP with years of font support (&lt;code&gt;★ ♥ ♡ ✧ ♪ ➤&lt;/code&gt;) and avoid freshly-added or niche blocks unless you have tested them on real devices.&lt;/p&gt;

&lt;h2&gt;
  
  
  TL;DR
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Pasted symbols are ordinary Unicode characters — that is why they work everywhere, and why they sometimes tofu.&lt;/li&gt;
&lt;li&gt;Display names and identifiers need different rules; every major platform treats them differently.&lt;/li&gt;
&lt;li&gt;Count graphemes, normalize with NFC, keep a stripped plain-text field for search, validate with &lt;code&gt;\p{...}&lt;/code&gt; escapes, and store &lt;code&gt;utf8mb4&lt;/code&gt;.&lt;/li&gt;
&lt;li&gt;Test with real decorated names — a kaomoji in your seed data will find bugs your QA never will.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Have you been bitten by a Unicode edge case in production? I would love to hear it in the comments.&lt;/p&gt;

</description>
      <category>unicode</category>
      <category>webdev</category>
      <category>javascript</category>
      <category>beginners</category>
    </item>
  </channel>
</rss>
