Ycons - Emoji Icon Generator: 131 Icons, ~8kb CSS

HTML

<style>
  .preview-effects {display:none}
</style>
<h1>131 Icons, ~8kb CSS</h1>

<div id="preview-icons"><div style="display: flex; align-items: center; gap: 10px; flex-wrap: wrap;"><code style="font-size: 12px; color: rgb(102, 102, 102); margin-right: 10px; min-width: 120px;">ycon-face-without-mouth</code><span class="ycon ycon-face-without-mouth"></span><span title="ycon-xxs" class="ycon ycon-face-without-mouth ycon-xxs"></span><span title="ycon-xs" class="ycon ycon-face-without-mouth ycon-xs"></span><span title="ycon-sm" class="ycon ycon-face-without-mouth ycon-sm"></span><span title="ycon-md" class="ycon ycon-face-without-mouth ycon-md"></span><span title="ycon-lg" class="ycon ycon-face-without-mouth ycon-lg"></span><span title="ycon-xl" class="ycon ycon-face-without-mouth ycon-xl"></span><span title="ycon-xxl" class="ycon ycon-face-without-mouth ycon-xxl"></span><span class="preview-effects ycon ycon-lg ycon-face-without-mouth gray" title="gray"></span><span class="preview-effects ycon ycon-lg ycon-face-without-mouth dim" title="dim"></span><span class="preview-effects ycon ycon-lg ycon-face-without-mouth bright" title="bright"></span><span class="preview-effects ycon ycon-lg ycon-face-without-mouth sepia" title="sepia"></span><span class="preview-effects ycon ycon-lg ycon-face-without-mouth invert" title="invert"></span><span class="preview-effects ycon ycon-lg ycon-face-without-mouth saturate" title="saturate"></span><span class="preview-effects ycon ycon-lg ycon-face-without-mouth desaturate" title="desaturate"></span><span class="preview-effects ycon ycon-lg ycon-face-without-mouth blur" title="blur"></span><span class="preview-effects ycon ycon-lg ycon-face-without-mouth mirror" title="mirror"></span><span class="preview-effects ycon ycon-lg ycon-face-without-mouth flip" title="flip"></span><span class="preview-effects ycon ycon-lg ycon-face-without-mouth rotate-90" title="rotate-90"></span><span class="preview-effects ycon ycon-lg...

CSS

.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; }

/* 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 2s linear infinite; }
.ycon.pulse { animation: ycon-pulse 2s ease-in-out infinite; }
.ycon.bounce { animation: ycon-bounce 1s 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; }

/* Icons */
.ycon-face-without-mouth::before { content: "\1F636"; }
.ycon-expressionless-face::before { content: "\1F611"; }
.ycon-neutral-face::before { content: "\1F610"; }
.ycon-smirking-face::before { content: "\1F60F"; }
.ycon-unamused-face::before { content: "\1F612"; }
.ycon-face-with-rolling-eyes::before { content: "\1F644";...