HTML Character Codes for Arrows, Hearts, Checkmarks & Stars — Copy and Paste

Need an arrow, checkmark, heart, or star in your HTML? Copy the entity code and paste it directly into your markup. No images, no icon fonts, no external libraries — just native HTML character codes that work in every browser.

Icon fonts and SVG sprites are great for complex icons, but for simple symbols — arrows in navigation, checkmarks in feature lists, stars in ratings, hearts in social buttons — HTML character codes are lighter, faster, and dependency-free. Here is every symbol you will actually use.

Arrows — Navigation, Breadcrumbs & UI

The most commonly used arrows in web interfaces:

Symbol	Code	Entity	Best Used For
\u2190	←	←	Back buttons, previous links
\u2192	→	→	Next links, CTAs, breadcrumbs ("Home \u2192 Blog")
\u2191	↑	↑	Scroll to top, increase indicators
\u2193	↓	↓	Dropdowns, scroll down, decrease indicators
\u2194	↔	↔	Swap, reversible actions
\u21D2	⇒	⇒	Implies, "therefore", logical arrows
\u25B6	▶	—	Play buttons, expand/collapse toggles
\u25C0	◀	—	Reverse play, collapse
\u25B2	▲	—	Sort ascending, collapse upward
\u25BC	▼	—	Sort descending, expand downward, dropdown carets
\u00BB	»	»	Read more links ("Read more \u00BB")
\u00AB	«	«	Previous page links

Pro tip: For breadcrumbs, use \u203A (single right-pointing angle, ›) or / instead of full arrows. Full arrows are visually heavy in breadcrumb trails.

Checkmarks & X Marks — Status, Validation & Feature Lists

Symbol	Code	Description	Best Used For
\u2713	✓	Check mark	Basic confirmation, task complete
\u2714	✔	Heavy check mark	Feature lists, pricing table "included"
\u2705	✅	White heavy check (emoji)	Informal, social-style checkmarks
\u2717	✗	Ballot X	Basic rejection, not included
\u2718	✘	Heavy ballot X	Feature lists, pricing table "not included"
\u274C	❌	Cross mark (emoji)	Informal rejection, error state
\u25CF	●	Filled circle	Radio button selected state
\u25CB	○	Empty circle	Radio button unselected state
\u25A0	■	Filled square	Checkbox checked state
\u25A1	□	Empty square	Checkbox unchecked state

Color tip: Wrap checks in <span style="color:#3fb950"> for green and X marks in <span style="color:#f85149"> for red. This is the pattern used in pricing comparison tables.

Stars & Hearts — Ratings, Favorites & Social

Symbol	Code	Description	Best Used For
\u2605	★	Filled black star	Star ratings (filled position)
\u2606	☆	Outline white star	Star ratings (empty position)
\u2B50	⭐	Glowing star (emoji)	Informal ratings, social
\u2665	♥ / ♥	Black heart suit	Favorite buttons, like counts
\u2764	❤	Heavy red heart	Love/like indicators
\u1F499	💙	Blue heart (emoji)	Social, themed favorites
\u1F44D	👍	Thumbs up (emoji)	Upvote, approval
\u1F44E	👎	Thumbs down (emoji)	Downvote, rejection

Star rating example: For a 3.5 out of 5 star rating, combine characters: \u2605\u2605\u2605\u2606\u2606 renders as a clear visual rating without any JavaScript or CSS frameworks.

Bullets, Dashes & Separators

Symbol	Code	Entity	Best Used For
\u2022	•	•	Inline bullet lists, tag separators
\u2014	—	—	Em dash — parenthetical breaks
\u2013	–	–	En dash for ranges (2020\u20132026)
\u00B7	·	·	Navigation separators (Home \u00B7 About \u00B7 Contact)
\u2026	…	…	Ellipsis (truncated text)
|	|	—	Pipe separator in headers and navigation
\u2015	―	—	Horizontal bar (long dash)

Misc Symbols You Actually Use

Symbol	Code	Entity	Description
\u00A9	©	©	Copyright symbol
\u00AE	®	®	Registered trademark
\u2122	™	™	Trademark
\u00B0	°	°	Degree (temperatures)
\u20AC	€	€	Euro currency
\u00A3	£	£	British pound
\u221E	∞	∞	Infinity (unlimited plans)
\u2709	✉	—	Envelope (email links)
\u260E	☎	—	Telephone (phone numbers)
\u2302	⌂	—	House (home links)

HTML Entities vs Icon Fonts vs SVG — When to Use Each

Method	Best For	Load Cost	Accessibility
HTML entities	Simple symbols: arrows, checks, hearts, stars, currency	✓ Zero — built into the browser	✓ Screen readers can interpret Unicode characters
Icon fonts (Font Awesome)	Consistent, styled icon sets across a site	~20-100KB font file download	~Needs aria-hidden and sr-only labels
SVG icons	Custom, detailed, multi-color icons	~2-10KB per icon (inline) or sprite sheet	✓ Can include title and desc elements
Image icons (PNG/JPG)	Photographic or complex raster icons	~5-50KB per image	✗ Alt text only, no scalability

Rule of thumb: Use HTML entities for simple UI symbols (arrows, checkmarks, bullets). Use an icon font or SVG when you need a consistent visual style across dozens of different icons. Do not load a 100KB icon font just to render three checkmarks.

Pair These Tools Together

• HTML Entities Encoder Decoder — convert text to HTML entities and back
• URL Encoder Decoder — encode characters for URLs
• Meta Tag Generator — generate meta tags with proper character encoding
• Diff Checker — compare HTML before and after entity encoding
• Find & Replace — bulk replace symbols with entity codes
• Favicon Generator — create site icons to complement your HTML symbols
• Emoji Picker — find emoji codes for web pages

Honest Limitations

HTML character codes render using the system font, so they look slightly different on Windows, macOS, iOS, and Android. Emoji characters vary the most — a heart emoji looks different in every OS. If you need pixel-perfect consistency across platforms, use SVG icons or an icon font. HTML entities are best for simple, universal symbols where slight rendering differences do not matter (arrows, checkmarks, bullets, currency symbols).