ycons

Ycons - Emoji Icon Generator 🎨

Icons for WebApps using Emojis - A powerful browser-based tool for creating custom CSS icon systems using Unicode emojis.

This tool is completely self-contained HTML that runs instantly and offline in any modern browser, just using the file:// protocol. All CSS and JavaScript are embedded - no external dependencies, no build steps, no server needed. You can download and run it from your download folder.

1,918 Unicode symbols available - 140,000+ possible thanks to Unicode’s vast character set

140,000 icons ~= 8MB CSS plus a lot of fun while browsing them searching the right one.

You may recognize some of these icons. These are the same icons used by LLMs and AI Assistants across the world.

🚀 ✨ 💪 ❤️ ⚡ 🔥 🎯 🏆 👑 💎 ⭐ ✅ ❌
⚠️ ℹ️ 🔒 👁️ 🔍 ⚙️ 🔔 ⬆️ ⬇️ ⬅️ ➡️ 🏠 📁
📄 🗑️ 💬 📞 🎵 🌙 ☀️ ⏰ 💰 🧠 🎨 🌍 📈

Ycons gives you all 1,918 symbols with familiar CSS classes (.ycon-rocket), plus powerful extras:

All while maintaining the ultra-lightweight approach that beats every icon library.

Preview

That’s what to expect: Plain CSS. You can copy&paste it to your HTML, or download the generated CSS as file and link it to your HTML.

No additional files, images, svgs, pngs, apis, endpoints, packages or else needed.

alt Ycons Entry Page, first

The final icons are plain CSS, so basically text - no external files or tools needed! You can copy&paste it to your main.css and it will work.

Live example for the following on JSFiddle using: 😀

But instead of the Emoji itself, we use Unicode identifiers (e.g., “\1F600”). That’s the safest way to deliver Unicode character in CSS for most browsers.

.ycon-flexed-biceps::before { content: "\1F600"; }

Renamed to (you can rename all, or none, it’s your call):

.ycon-ypsilon::before { content: "\1F600"; }

<!--
  General styles for Ycons - 😀

  This is the generated CSS Structure (copy&pasted):
-->
<style>
.ycon {
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
  font-size: 1.25rem;
  pointer-events: none;
  user-select: none;
}
.ycon::before { display: inline-block; }

/* Animation timer */
:root {
    --ycon-animation-spin: 2s;
    --ycon-animation-pulse: 2s;
    --ycon-animation-bounce: 1s;
}
@media (prefers-reduced-motion: reduce) {
    :root {
        --ycon-animation-spin: 0s;
        --ycon-animation-pulse: 0s;
        --ycon-animation-bounce: 0s;
    }
}

/* Transform utilities */
.ycon.mirror { transform: scaleX(-1); }
.ycon.flip { transform: scaleY(-1); }
.ycon.mirror.flip { transform: scale(-1, -1); }
.ycon.rotate-90 { transform: rotate(90deg); }
.ycon.rotate-180 { transform: rotate(180deg); }
.ycon.rotate-270 { transform: rotate(270deg); }

/* Filter utilities */
.ycon.gray { filter: grayscale(1); }
.ycon.blur { filter: blur(1px); }
.ycon.dim { filter: brightness(0.7); }
.ycon.bright { filter: brightness(1.3); }
.ycon.sepia { filter: sepia(1); }
.ycon.invert { filter: invert(1); }
.ycon.saturate { filter: saturate(1.5); }
.ycon.desaturate { filter: saturate(0.5); }

/* Animation utilities */
.ycon.spin { animation: ycon-spin var(--ycon-animation-spin) linear infinite; }
.ycon.pulse { animation: ycon-pulse var(--ycon-animation-pulse) ease-in-out infinite; }
.ycon.bounce { animation: ycon-bounce var(--ycon-animation-bounce) ease-in-out infinite; }

/* Keyframes */
@keyframes ycon-spin {from {transform: rotate(0deg);} to {transform: rotate(360deg);}}
@keyframes ycon-pulse {0%, 100% {opacity: 1;} 50% {opacity: 0.5;}}
@keyframes ycon-bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-10px); }
  60% { transform: translateY(-5px); }
}

/* Size variants */
.ycon-xxs { font-size: 1rem; }
.ycon-xs { font-size: 1.25rem; }
.ycon-sm { font-size: 1.5rem; }
.ycon-md { font-size: 1.75rem; }
.ycon-lg { font-size: 2rem; }
.ycon-xl { font-size: 2.5rem; }
.ycon-xxl { font-size: 3rem; }

/*
 * Ycons go here. You can add new Ycons using revolutionary copy&paste.
 */
.ycon-ypsilon::before { content: "\1F600"; }

/* 💡 Fun fact:
  Ycons works with ANY Unicode character! Need an ampersand (&) or custom symbol?

  .ycon-ampersand::before { content: "\0026"; }  // \0026 = & symbol
  .ycon-heart::before { content: "\2665"; }      // \2665 = ♥ heart

  Find UTF-16 codes at: https://www.compart.com/en/unicode/
*/
</style>
<!--

  * Available variants, including sizes and modifiers.
  * This is not part of the tool, but how to use Ycons.

-->
<span class="ycon ycon-ypsilon"></span>
<span class="ycon ycon-ypsilon ycon-xxs"></span>
<span class="ycon ycon-ypsilon ycon-xs"></span>
<span class="ycon ycon-ypsilon ycon-sm"></span>
<span class="ycon ycon-ypsilon ycon-md"></span>
<span class="ycon ycon-ypsilon ycon-lg"></span>
<span class="ycon ycon-ypsilon ycon-xl"></span>
<span class="ycon ycon-ypsilon ycon-xxl"></span>
<hr />
<span class="ycon ycon-ypsilon gray"></span>
<span class="ycon ycon-ypsilon dim"></span>
<span class="ycon ycon-ypsilon bright"></span>
<span class="ycon ycon-ypsilon sepia"></span>
<span class="ycon ycon-ypsilon invert"></span>
<span class="ycon ycon-ypsilon saturate"></span>
<span class="ycon ycon-ypsilon desaturate"></span>
<span class="ycon ycon-ypsilon blur"></span>
<span class="ycon ycon-ypsilon mirror"></span>
<span class="ycon ycon-ypsilon flip"></span>
<span class="ycon ycon-ypsilon rotate-90"></span>
<span class="ycon ycon-ypsilon spin"></span>
<span class="ycon ycon-ypsilon pulse"></span>
<span class="ycon ycon-ypsilon bounce"></span>

Live demo with 131 icons (~8kb CSS) on JSFiddle

🔄 Creative Loading Indicators

Spinning emojis make perfect themed loading indicators with personality:

<!-- Classic spinners -->
<span class="ycon ycon-gear spin"></span>           <!-- ⚙️ Processing... -->
<span class="ycon ycon-cyclone spin"></span>        <!-- 🌀 Loading... -->
<span class="ycon ycon-arrows-counterclockwise spin"></span> <!-- ↺ Refreshing... -->

<!-- Creative themed loaders -->
<span class="ycon ycon-pizza spin"></span>          <!-- 🍕 Cooking your data -->
<span class="ycon ycon-cd spin"></span>             <!-- 💿 Loading playlist -->
<span class="ycon ycon-camera spin"></span>         <!-- 📷 Processing photos -->

Pro tip: Combine animations for extra attention (not included):

<style>
.ycon.pulse.spin {
  animation:         ycon-pulse 2s ease-in-out infinite, ycon-spin 2s linear infinite;
  -webkit-animation: ycon-pulse 2s ease-in-out infinite, ycon-spin 2s linear infinite;
}
</style>
<span class="ycon ycon-hourglass-flowing-sand spin pulse"></span> <!-- ⏳ Double effect! -->
Interactive loading indicators demo on JSFiddle 70 Ycons, ~5,2kb CSS size, no files involved

🚀 Quick Start

✨ Try Ycons Online ✨

💪 Advanced usage examples

📦 Pre-built Downloads

Don’t want to generate your own? Grab the complete icon set:

alt Ycons Entry Page, second

🛠️ Custom Generation

  1. Open the live tool or download ./example/index.html (~290kb)
  2. Search or browse for emojis you want to use
  3. Click emojis to select them
  4. See live preview and generated CSS
  5. Download your custom CSS file

✨ Features

🔍 Live Emoji Browser

🎛️ Customizable CSS Generation

📱 Live Preview

💾 Export & Import

🎯 Usage Examples

Basic Icon Usage

<span class="ycon ycon-rocket"></span>
<span class="ycon ycon-heart"></span>
<span class="ycon ycon-star"></span>

Size Variants

<span class="ycon ycon-fire ycon-xs"></span>    <!-- Extra small -->
<span class="ycon ycon-fire ycon-sm"></span>    <!-- Small -->
<span class="ycon ycon-fire ycon-lg"></span>    <!-- Large -->
<span class="ycon ycon-fire ycon-xxl"></span>   <!-- Extra large -->

Transform Effects

<span class="ycon ycon-arrow-right mirror"></span>     <!-- Mirrored -->
<span class="ycon ycon-smiley flip"></span>            <!-- Flipped -->
<span class="ycon ycon-clock rotate-90"></span>        <!-- Rotated 90° -->

Filter Effects

<span class="ycon ycon-camera gray"></span>            <!-- Grayscale -->
<span class="ycon ycon-sun bright"></span>             <!-- Brightened -->
<span class="ycon ycon-crescent-moon dim"></span>      <!-- Dimmed -->
<span class="ycon ycon-old-key sepia"></span>          <!-- Sepia tone -->

Animations

<span class="ycon ycon-gear spin"></span>              <!-- Spinning -->
<span class="ycon ycon-beating-heart pulse"></span>    <!-- Pulsing -->
<span class="ycon ycon-basketball bounce"></span>      <!-- Bouncing -->

Custom Animation Timing

Customize animation speeds with CSS custom properties:

:root {
    --ycon-animation-spin: 5s;     /* Slower spinning */
    --ycon-animation-pulse: 1s;    /* Faster pulsing */
    --ycon-animation-bounce: 3s;   /* Slower bouncing */
}

/* Disable animations for users with motion sensitivity */
@media (prefers-reduced-motion: reduce) {
    :root {
        --ycon-animation-spin: 0s;
        --ycon-animation-pulse: 0s;
        --ycon-animation-bounce: 0s;
    }
}

Combining Classes

<span class="ycon ycon-rocket ycon-lg spin bright"></span>

🛠️ Tool Features

Search & Filter

CSS Customization & Layout

Preview & Export

🌍 Why Unicode Emojis as Icons?

💡 Did you know? The same Unicode emojis you see here are used by large language models (LLMs), messengers, and social apps worldwide. Your users already know these icons!

💡 Use Cases

🌟 Benefits

🔧 Development

Processing Emoji Data

cd scripts/
node parse-emojis.js

This processes the Unicode emoji-test.txt file into structured JSON data.

🚧 Considerations & Limitations

Platform Rendering Differences

Emojis look different on iOS, Android, Windows, Linux. Your icons aren’t visually consistent unless you pair them with a custom emoji font (like Twemoji, Noto Color Emoji). For many projects, that variance is acceptable; for branding-critical ones, consider custom fonts.

Accessibility Notes

Because these are inserted with ::before { content: "\1F600" }, screen readers may not announce them correctly. Consider:

Performance vs Icon Libraries

Ycons advantage: 150 icons ≤ 10kb vs Font Awesome (~76kb) or Heroicons SVG bundle (~45kb)

💡 Future Enhancements

Planned Improvements

Comparison with Alternatives

Unlike heavyweight icon libraries, Ycons prioritizes:

📜 License

Open source - feel free to use, modify, and distribute!

👥 Authors

Made with ❤️ for developers who love emojis 🚀✨