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
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)"
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.
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.
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.)
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
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
@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.
@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.
@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.
@AdhamDannaway Harmonicons is new. Comes with both multicolor and monochrome palettes: https://t.co/Z4N2zwjj2g
Palettes are customizable using the "Color Shifter" tool in the IcoMoon app. Palettes would also be included in generated COLRv0 fonts 😉