DEV Community: lemon chen

Simbolos HTML para tu Pagina Web ✤☎★♘♤☂✚

lemon chen — Wed, 25 Mar 2026 11:10:38 +0000

En esta Entrada del Blog mas que una Noticia, Tutorial o Articulo Normal te mostraremos una Chuleta ( Cheat Sheet 😉 ) con algunos ( trate de que fuera la mayoria 😀 ) simbolos HTML para tu Pagina Web, Proyecto en Internet, Facebook, Twitter, Google+, etc.. Sin mas que copiar y pegar el simbolo o si es necesario el codigo HTML para que comiences a utilizarlo 😉 asi que si utilizas mucho estos simbolos en tus Redes Sociales o eres Webmaster como yo y quieres tener a la mano la mayor cantidad de simbolos para utilizar en tu web ve preparando tus Marcadores o Favoritos en tu Navegador ( Ctrl + D 😉 ), entra y dale una checada a esta lista de simbolos HTML para tu Pagina Web..

Contenido
QUE ES UN SIMBOLO HTML?
CHULETA DE SIMBOLOS
SIEMPRE A LA MANO
Simbolos HTML para tu Pagina Web – Chuleta de Referencia
QUE ES UN SIMBOLO HTML?
Simbolos HTML para tu Pagina Web - Chuleta de Referencia 1Un simbolo HTML es un caracter que fue creado para representar Entidades Matematicas, Caracteres Geek, Flechas, Simbolos Tecnicos y Cientificos, Formas Especiales, etc.. y que son soportados enteramente por el lenguaje HTML. Quieres saber mas de estos simbolos html para tu pagina web? hazlo aqui Aesthetic Emojis

Estos simbolos los puedes utilizar en Redes Sociales como Facebook, Twitter, Google+ y demas 😀 asi como tambien en cualquier contenido HTML en tu Web, incluso puedes utilizarlos en tus Titulos y algunos de ellos en las Meta-Descripciones para que sean Visibles en tu Snippet en los Resultados de Google y asi llamar la atencion de los Usuarios a Clickear en tu Web 😉

CHULETA DE SIMBOLOS
Veamos entonces algunos simbolos HTML para tu Pagina Web 😉 ..

✢ ✢
✣ ✣
✥ ✥
✦ ✦
✩ ✩
✫ ✫
✭ ✭
✯ ✯
✱ ✱
✳ ✳
✵ ✵
✷ ✷
✹ ✹
✻ ✻
✽ ✽
✿ ✿
❁ ❁
❃ ❃
❅ ❅
❇ ❇
❉ ❉
❋ ❋
❖ ❖
❊ ❊
❈ ❈
❆ ❆
❄ ❄
❂ ❂
❀ ❀
✾ ✾
✼ ✼
✺ ✺
✸ ✸
✶ ✶
✴ ✴
✲ ✲
✰ ✰
✮ ✮
✬ ✬
✪ ✪
✧ ✧
✤ ✤
♅ ♅
♆ ♆
♇ ♇
♔ ♔
♕ ♕
♖ ♖
♗ ♗
♘ ♘❤ ❤
❥ ❥
❦ ❦
❧ ❧
❢ ❢
❣ ❣
♥ ♥
♡ ♡
☎ ☎
☏ ☏
☐ ☐
☑ ☑
☒ ☒
✍ ✍
✓ ✓
✔ ✔
✕ ✕
✖ ✖
✗ ✗
✘ ✘
• •
● ●
✎ ✎
✏ ✏
✐ ✐
✁ ✁
✂ ✂
✃ ✃
✄ ✄
✆ ✆
✇ ✇
✈ ✈
✉ ✉
@ @
© ©
℠ &#8480
® ®
™ ™
¤ ¤
€ €
¢ ¢
£ £
♙ ♙
♚ ♚
♛ ♛
♜ ♜
♝ ♝
♞ ♞
♟ ♟
♠ ♠$ &36;
¥ ¥
§ §
№ №
☚ ☚
☛ ☛
☜ ☜
☝ ☝
☞ ☞
☟ ☟
✍ ✍
✌ ✌
☹ ☹
☺ ☺
☻ ☻
℃ ℃
℉ ℉
Ω Ω
℧ ℧
☠ ☠
☡ ☡
☢ ☢
☣ ☣
☤ ☤
℞ ℞
☀ ☀
☁ ☁
☂ ☂
☃ ☃
☄ ☄
★ ★
☆ ☆
☇ ☇
☈ ☈
☉ ☉
☽ ☽
☾ ☾
☼ ☼
☥ ☥
☦ ☦
☧ ☧
☨ ☨
♤ ♤
♥ ♥
♡ ♡
♦ ♦
♢ ♢
♣ ♣
♧ ♧
♩ ♩

Complete list of symbols for your website

lemon chen — Wed, 25 Mar 2026 11:06:07 +0000

What is a web symbol?
Web symbols or HTML symbols are short HTML snippets, commonly referred to as character entities or entity codes, used to display characters that have a special meaning in HTML, as well as characters not available on the keyboard.

Web symbols have existed since the appearance of electronic keyboards due to programming needs, but they have greatly expanded with social networks like WhatsApp, becoming almost a new language and form of expression.

The most common and necessary web symbols have easy shortcuts indicated on our keyboard (e.g. % @ €), or can be created using key combinations that many of us know and use (e.g. 😉 ), but most HTML symbols are not easily accessible, so the easiest way to use them is the classic copy/paste method we all know.

If you’re a fan of these icons, here you can get custom backpacks or a personalized backpack with these symbols or other images that inspire you. Yes, they are sponsored links 😛 and although we at Marabelia write for the love of it, money is money 😅
Symbols to Copy and Paste on Your Website
At Marabelia (Web design in Valencia) we’ve decided to create a complete list of the most useful, original, and interesting web symbols (web icons) for use on your website, emails, and social media… since these symbols are supported by all modern browsers.

Without the need to install libraries like Icomoon or embed images from Flaticon, we can add images compatible with most browsers that are especially useful for contact sections and to bring our text to life. To use them, just select the icon, copy it, and paste it into your website. 🙂
Web Symbols for the Contact Section
Phones: ☏ ✆ ☎ ☎ ? ? ? ? ?
Emails: ✉ @ ✐ ✎ ✍ ✏ ✍ ✉ ✉ ✒ ✏ ? ? ? ?
Addresses: ↙ ⬅ ↖ ⬇ ? ⬆ ↘ ➡ ↗
Opening Hours: ⏰ ⌚⏳ ⌛ ? ? ? ? ? ? ? ?
Keys: ? ? ? ?
Sounds: ? ? ? ? ? ?
Web Symbols for Creating Lists
Check: ☑ ✓ ✔ ✔ ☑ ? ✅
No check: ☓ ✕ ✖ ✗ ✘ ❌ ❎ ?
Bullet Points: • ● ▸ ▹ ○ ■ ? ⁃ ➣ ➕ ➜ ➤ ➩ ☉ ⤷ ▸ ⋆ ◦ ⇢ ᶥ ↝ ➥ ⌑ » ↠ 》《 ━
FAQs / Questions: ❗❕❓❔
Common Web Symbols:
Star Symbols: ★ ☆ ❇ ✳ ✢ ✣ ✥ ✦ ✩ ✫ ✭ ✯ ✱ ✵ ✷ ✹ ✸ ✶ ✴ ✰ ✮ ✬ ✪ ✧ ⋆ ⁂ ⭐ ? ✨ ?
Flower Symbols: ✻ ✽ ❋ ✿ ❁ ❃ ❅ ❉ ❋ ❖ ❊ ❈ ❆ ❂ ❀ ✾ ✼ ✺ ✲ ✤ ✾ ⚘ ? ? ? ? ? ? ? ?
Heart Symbols: ❥ ❦ ❧ ❢ ♥ ❤ ♡ ❤❣ ? ? ? ? ? ? ? ? ? ? ? ?
Moon Symbols: ☾ ☽ ? ? ? ? ? ? ? ? ?
Sun Symbols: ☀ ☼ ❂ ☀ ? ? ? ? ⛅
Web Symbols We Love
Mac web symbol: 
Rainbow web symbol: ☁
Letter M web symbol: ℳ
Very original abstract symbols: ༄ ♨ ༼ ࿅ ໒ ◌ ⇝ ッ ┊ϟ ◞ ᶥ ░
Patent and Trademark Web Symbols
© ℠ ® ™ № Ⓟ ™ ⓡ
Simbolos
Ⓐ Ⓑ Ⓒ Ⓓ Ⓔ Ⓕ Ⓖ Ⓗ Ⓘ Ⓙ Ⓚ Ⓛ （男） Ⓝ Ⓞ Ⓟ Ⓠ Ⓡ Ⓢ Ⓣ Ⓤ Ⓥ Ⓦ Ⓧ Ⓨ Ⓩ
ⓐ ⓑ ⓒ ⓓ ⓔ ⓕ ⓖ ⓗ ⓘ ⓙ ⓚ ⓛ ⓜ ⓝ ⓞ ⓟ ⓠ ⓡ ⓢ ⓣ ⓤ ⓥ ⓦ ⓧ ⓨ ⓩ
ᴬ ᗩ ᵃ ℬ ᴰ ℰℯ ᴱ ᵉ℮ ℊ ℋ ℐ ᵢ ᵐ ᴹ ᴺ ℓ ℛ ℜ ᴿ ℝ ᵀ ᵗ ℴ ᵘ ᵞ ? ? ? ?
Numeric Web Symbols
➀ ➁ ➂ ➃ ➄ ➅ ➆ ➇ ➈ ➉ ➊ ➋ ➌ ➍ ➎ ➏ ➐ ➑ ➒ ➓
Useful Black and White Web Symbols
Text design: ☰ ☱ ☲ ☳ ☴ ☵ ☶ ☷
Shape symbols: ∆ ▀ ▣ ◘ ▭ ⎔ ◢ ◣ ◤ ◥ ◆ ❖ ▲▒ ▓ ░ ▌▍◐ ◓ ⋐ ⋑
Line symbols: ⌞ ⌟ ⎯ ─ ━ │ ┃ ┄ ┅ ┆ ┇ ┈ ┉ ┊ ┋ ┌┍ ┎ ┏ ┐ ┑ ┒ ┓
└ └ ┕ ┖ ┗ ┘ ┙ ╭ ╮ ╯ ╰ ╱ ╲ ╳ ╴╵ ╶ ╷ ╸ ╹ ╺ ╻ ╼ ╽ ╾ ╿ ▏
▕ ◜ ◝ ◞◟ ◠ ◡
Musical notes and symbols: ♩♪ ♫ ♬ ♭♮♯
Currency symbols: € ¢ £ $ ¥ §
Mathematical symbols: Ω ℧ ☡ ➰ ℞ ² ₁ ⁰ ∞ √
Calligraphic symbols: “ ❞ ❛ ❜ 〚〖〘〙〔〕
Measurement symbols: ℃ ℉
Religious symbols: ☩ ✚ ✙ ✞ ✟ ✠ ☫ ☬ ☭ ✡ ♅ ♆ ☥ ☧ ☨
Others: ➴ ↬ ࿏ ྿ ࿌ ت 串 Я ಎ ःじ ᄊ Ɗ ≳ Ⴕ ɐ ☤ ☇☈ ☿ ♁ ♃ ♄ ༀ ࿃ ༜ ༗ ↷
More complete list of web symbols we have found.

All Arrow Symbols
↪ ↩ ← ↑ → ↓ ↔ ↕ ↖ ↗ ↘ ↙ ↚ ↛ ↜ ↝ ↞ ↟ ↠ ↡ ↢ ↣ ↤ ↦ ↥ ↧ ↨ ↫ ↬ ↭ ↮ ↯ ↰ ↱ ↲ ↴ ↳ ↵ ↶ ↷ ↸ ↹ ↺ ↻ ⟲ ⟳ ↼ ↽ ↾ ↿ ⇀ ⇁ ⇂ ⇃ ⇄ ⇅ ⇆ ⇇ ⇈ ⇉ ⇊ ⇋ ⇌ ⇍ ⇏ ⇎ ⇑ ⇓ ⇐ ⇒ ⇔ ⇕ ⇖ ⇗ ⇘ ⇙ ⇳ ⇚ ⇛ ⇜ ⇝ ⇞ ⇟ ⇠ ⇡ ⇢ ⇣ ⇤ ⇥ ⇦ ⇨ ⇩ ⇪➙ ➚ ➛ ➜ ➝ ➞ ➟ ➠ ➡ ➢ ➣ ➤ ➥ ➦ ➧ ➨ ➩ ➪ ➫ ➬ ➭ ➮ ➯ ➱ ➲ ➳ ➴ ➵ ➶ ➷ ➸ ➹ ➺ ➻ ➼ ➽ ➾ ⬀ ⬁ ⬂ ⬃ ⬄ ⬅ ⬆ ⬇⏎ ▲ ▼ ◀ ▶
Divider Lines with Symbols
▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮▮

◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼

◉◉◉◉◉◉◉◉◉◉◉◉◉◉◉◉◉◉◉◉◉◉◉◉◉◉

●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈◈

◂▸◂▸◂▸◂▸◂▸◂▸◂▸◂▸◂▸◂▸◂▸◂▸◂▸◂▸◂▸◂▸◂▸◂▸◂▸◂▸◂▸

◅▻◅▻◅▻◅▻◅▻◅▻◅▻◅▻◅▻◅▻◅▻◅▻◅▻◅▻

◖◗◖◗◖◗◖◗◖◗◖◗◖◗◖◗◖◗◖◗◖◗◖◗◖◗◖◗◖◗◖◗◖◗◖◗

Emoticon Symbols
☁☂☃☄❄ ⛅ ⚡✈♂♀✂✌☝☠☢☣ ♻ ⚓ ☘
Click here to see the most complete and organized list of emoticons we have found.

Other Useful Web Symbols in Color
▼ ▽ ◉ ⭕☑⚪⚫ ? ?▪▫⬛⬜◼◻◾◽ ? ? ? ? ? ? ? ?

We will continue expanding this collection. If you know any interesting symbol that is not in this list, please let us know in the comments.

Building a Zero-Dependency Fullscreen Color Tool: Lessons from PinkScreen

lemon chen — Mon, 09 Mar 2026 07:16:22 +0000

Last month, I shipped Pink Screen—a dead-simple tool that displays fullscreen colors for video backgrounds, livestreaming, and display testing. It now serves 100K+ monthly active users with zero server costs and 100 Lighthouse performance scores.

Here's how I built it, and why sometimes the simplest architecture is the most scalable.

The Problem: Existing Tools Were Bloated

Before PinkScreen, creators and developers faced three options:

Photoshop/GIMP: Overkill for displaying a solid color
YouTube "color screen" videos: Ads, compression artifacts, internet dependency
Other online tools: 2MB+ JavaScript bundles, analytics trackers, sign-up gates

I needed something that just works—instant, private, and frictionless.

The Architecture: Less is More

Core Philosophy: CSS-First, JavaScript-Optional


html
<!-- The entire "app" -->
<!DOCTYPE html>
<html>
<head>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { 
      background: #FFC0CB; 
      height: 100vh; 
      width: 100vw;
      cursor: pointer;
    }
    .controls { 
      position: fixed; 
      bottom: 20px; 
      left: 50%; 
      transform: translateX(-50%);
      opacity: 0;
      transition: opacity 0.3s;
    }
    body:hover .controls { opacity: 1; }
  </style>
</head>
<body>
  <div class="controls">
    <button onclick="download()">Download HD</button>
    <input type="color" value="#FFC0CB" onchange="updateColor(this.value)">
  </div>

  <script>
    // Only 847 bytes gzipped
    const fullscreen = () => document.documentElement.requestFullscreen();
    const updateColor = (c) => document.body.style.background = c;
    const download = () => {
      const canvas = document.createElement('canvas');
      canvas.width = 3840; canvas.height = 2160;
      const ctx = canvas.getContext('2d');
      ctx.fillStyle = getComputedStyle(document.body).backgroundColor;
      ctx.fillRect(0, 0, canvas.width, canvas.height);
      const link = document.createElement('a');
      link.download = `pinkscreen-${canvas.width}x${canvas.height}.png`;
      link.href = canvas.toDataURL();
      link.click();
    };
    document.body.addEventListener('click', fullscreen);
  </script>
</body>
</html>

Building a Production-Ready Clipboard Image Uploader with Next.js: Lessons from Paste Image

lemon chen — Mon, 09 Mar 2026 07:02:39 +0000

As a full-stack developer who recently built Paste Image, I want to share how Next.js 14 enabled us to create a lightning-fast, SEO-friendly clipboard image uploader that handles client-side image processing with zero server costs and maximum privacy.

Technical Architecture Highlights

Next.js 14 with App Router

Leverages React Server Components for instant initial page loads while maintaining seamless client-side interactivity for paste-and-go workflows.

Zero-Server Image Processing

All image manipulation—paste, crop, resize, format conversion—happens entirely in the browser using the Canvas API. This ensures zero server costs, instant processing, and complete privacy (images never touch our servers unless users choose to host them).

Dynamic Imports for Performance

Heavy editor components are lazy-loaded to keep initial bundle size minimal, achieving sub-second Time to Interactive even on mobile networks.


javascript
// Our dynamic import strategy for the image editor
const ImageEditor = dynamic(() => import('@/components/image-editor'), {
  loading: () => <Skeleton className="h-[400px] w-full" />,
  ssr: false // Client-side only for clipboard API access
});