Keyamoon

🆕

[Keyamoon @Keyamoon]

Excited to introduce the new IcoMoon app:

🖋️ SVG Editor
🎨 Color Fonts (COLRv0, Baseline widely available)
😌 No need to outline strokes or flatten SVGs
👥 Live collaboration
⭐️ Export to @vuejs, @elmlang, @reactjs, @Web_Components, @FlutterDev (under Font), favicon and more

[Keyamoon @Keyamoon]

@fabiospampinato The best way to use icon fonts is as progressive enhancement, for customizing emojis or existing Unicode characters. We use multicolor (COLRv0) fonts too: https://t.co/JQ8bvBVuJb

[Keyamoon @Keyamoon]

@elitethedev One solution is to use a custom icon/emoji font containing only the icons needed, which can easily be made from SVG images.

[Keyamoon @Keyamoon]

SVG Masks are defined using the <mask> element, which can contain typical shapes or paths. It should also have an id attribute. The mask can be applied to other elements by referencing its id in the mask attribute: mask="url(#id)"

[IcoMoon @_vect_]

Added support for making masks in the SVG editor.

[Keyamoon @Keyamoon]

@sarah_edo I'm thinking exposing "command palettes" as tools would be a natural first step.

[Keyamoon @Keyamoon]

@Aquavirgo2000 Thank you for writing this. I noticed CSS issues with the home page in your screenshots. It's fixed now.

[Keyamoon @Keyamoon]

@avstorm Third one in top row needs better corner smoothing. Second symbol in the last row is hard to recognize.

[IcoMoon @_vect_]

Changes made in IcoMoon's SVG editor can be copied to other glyphs via the Edits tab of the Batch panel. This can be especially useful for batch-editing strokes, colors, padding, or adding a common background shape to multiple glyphs.

[Keyamoon @Keyamoon]

I stopped using Adobe Illustrator years ago as I was using my own SVG editor while it was still in development. All the icons used in the app itself as well as the new Harmonicons set were made in this free vector editor.

[Ahmad Shadeed @shadeed9]

Hot tip: you can get 3 months of Adobe for free just by trying to cancel your yearly plan. When you go through the cancellation flow, they'll offer you something free to stay 😅

(I considered cancelling because I don't use Adobe apps as often as I used to.)

[Keyamoon @Keyamoon]

@LindaOjo_ Left

[Görkem YILDIZ @uiuxgorkem]

Just shipped: ACS — Audio Cascading Style Sheets.

CSS describes how an HTML element should LOOK. ACS uses the same selectors and cascade to describe how it should SOUND. One <link rel="audiostyle"> and your buttons sound like buttons — no event handlers, no play() calls. The cascade does the wiring.

button.primary { sound-on-click: pop; pitch: +1st; }
input:on-input { sound: keystroke; }
dialog[open] { room: small-room; }

Why I built it:
• Every product team re-solves UI sound design from scratch with imperative JS
• CSS's cascade — selectors, specificity, inheritance — is already the right abstraction
• Web Audio API is powerful but low-level; the declarative layer was missing

What's in the box:
• 49 calibrated presets (whole library within 4.8 dB spread)
• 9 mood overlays (lofi, glassy, retro… real bitcrush + ring-mod + noise floor)
• 8 theme packs (apple, material, retro, brutalist, cinematic, bauhaus, terminal, ambient)
• AudioWorklet realtime path (sub-1ms latency)
• Full cascade: !important, @media, attribute selectors, descendant combinators
• @sound blocks for custom voices
• CSS-var bridge — var(--token) works in any ACS value
• VSCode + Cursor extension — syntax, outline, audition CodeLens, knob-based sound picker
• AI agent skill (Claude Code / Cursor) — turns a natural-language prompt into a paste-ready @sound

~14 KB gzipped · zero dependencies · MIT.

https://t.co/TYNoe5Af6e
https://t.co/QpwxPIUarg
https://t.co/j1C6xp7ogS

#WebDev #JavaScript #CSS #WebAudio #UXDesign #SoundDesign #DeveloperTools #OpenSource #UIEngineering #FrontendDevelopment #npm #VSCode #Cursor #AIAgents #ClaudeCode #ACS #AudioCSS #DesignSystems

[IcoMoon @_vect_]

In IcoMoon's SVG editor, you can extend Bézier curves without adding extra anchor points.

When adding an anchor point to a curve, you can keep dragging to adjust the position of the new point. You can also drag beyond open endings to extend the path.

https://t.co/DogYvCx5IE

[Keyamoon @Keyamoon]

@kzzzf @Leo_cavalcante @notbrent The new IcoMoon app supports actual multicolor fonts using COLR/CPAL tables, as opposed to layering of multiple characters for achieving the same effect.

[Keyamoon @Keyamoon]

@wesbos @syntaxfm The new https://t.co/x4SaPVNB5F. SVG editor and multicolor (Baseline widely available) font generator.

https://t.co/KLSEoMmwUI

[IcoMoon @_vect_]

Drawing a 🚀 rocket icon in the new vector/svg editor.
https://t.co/DogYvCx5IE

[IcoMoon @_vect_]

Drawing a 🚀 rocket icon in the new vector/svg editor.
https://t.co/DogYvCx5IE

[Keyamoon @Keyamoon]

@boneGPT @Czar_Of_Silly For editing SVG icons/glyphs, you could try https://t.co/x4SaPVNB5F as an alternative. No account or installation is required.

[Keyamoon @Keyamoon]

@denicmarko SVG editor + Multicolor (COLRv0) font generator 😀 https://t.co/x4SaPVNB5F

[Keyamoon @Keyamoon]

@j8ahmed Unfortunately not. But if you have any questions, feel free to ask. I might be able to record some videos and post here.

[Keyamoon @Keyamoon]

@AlbiaHossain As alternative for editing SVGs or designing simple icons/logos, you might want to try https://t.co/x4SaPVNB5F

No account or installation is required. It can generate multicolor fonts too.

[Keyamoon @Keyamoon]

@whitokki For simple logo/icon design, you could try https://t.co/x4SaPVNB5F too. It works in the browser so no need to install anything. You won't need to sign up for an account either.

[Keyamoon @Keyamoon]

@Starrtoon @angirel343 For simple stuff, you might wanna try https://t.co/x4SaPVNB5F. Works in the browser. No account required.