53 Photos and videos
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
ALT IcoMoon's SVG editor in dark mode on a wide screen. Changes made in the main editing area (center) get reflected in the code editor (bottom) and vice versa. The history panel can be seen on the right side, with an item that is toggled off and disabled. Each item in the history panel has an indicator for the user that made the change. The properties panel appears on left, with options for changing size, smooth rounding with G2 continuity, color, opacity, stroke width, and more.
1
5
405
Keyamoon retweeted
Jun 10
Firefox Nightly has implemented link parameters (behind a flag). This will make working with SVG far easier.
codepen.io/editor/cssgrid/pe…
drafts.csswg.org/css-link-pa…
Chrome also working on it
github.com/w3c/csswg-drafts/…
2
5
160
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)"
106
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.
May 17
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.)
264
Keyamoon retweeted
May 4
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.
audiocss.dev
github.com/Grkmyldz148/acs
npmjs.com/package/acs-audio
#WebDev #JavaScript #CSS #WebAudio #UXDesign #SoundDesign #DeveloperTools #OpenSource #UIEngineering #FrontendDevelopment #npm #VSCode #Cursor #AIAgents #ClaudeCode #ACS #AudioCSS #DesignSystems
1
2
176
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.
IcoMoon.io
1
16
73,998
Drawing a 🚀 rocket icon in the new vector/svg editor.
IcoMoon.io
1
1
393
In Safari, requests for SVGs referenced in `use` elements don't go through service workers! As a result, you can't make `use` elements with external SVGs work offline 😔
bugs.webkit.org/show_bug.cgi…
2
1
My book, 'Responsive Web Design with HTML5 and CSS, Third Edition' is now available to buy. 🎉
Find out more: rwd.education
Available as eBook and hard copy. Quicklinks:
Packt: packtpub.com/web-development…
Amazon: amazon.com/Responsive-Web-De…
#rwd #css #html #svg #frontend
3
12
28
Keyamoon retweeted
21 Apr 2020
Align icons vectors to the pixel grid - even in a retina-screen world. No fuzzy pixels. Here's what Slack could look like
5
6
60
Pixel grids and pixel perfection do matter, not for controlling the actual physical pixels on the screen, but because of this thing called "anti-aliasing", which happens on the software level, before your pixels are sent to the screen. This applies to vectors (e.g. SVG) too.
1
1
1
Anti-aliasing can turn a single black pixel positioned at (1.5, y) to two gray pixels positioned at (1, y) and (2, y). So you end up sending two gray pixels to the screen instead of a single black one. The difference would be visible on a lot of screens, even high PPI ones.
1
Keyamoon retweeted
25 Aug 2018
My first @code extension will help you to preview Icomoon icon into your style files (css, scss, less) marketplace.visualstudio.com…
4
7
12
Icon Fonts vs SVGs – Which One Should You Use In 2018? keycdn.com/blog/icon-fonts-v… #webperf
4
6
Keyamoon retweeted
1 Jun 2018
Thanks to everyone who attended my @MusicCityTech #ui talk “Icons Behaving Badly”! For those who made it, and others who were at different sessions, slides are available - enjoy! 😃 slideshare.net/mobile/Andrew…
1
2
🔗 icomoon.app directly takes you to the IcoMoon app.
1
1
🔥 Zondicons (zondicons.com) by @steveschoger is a free (CC BY 4.0), pixel perfect icon pack with a grid size of 20×20. Now available in IcoMoon's library too: icomoon.io/app/#/select/libr…
6
20