@Keyamoon

🆕 https://xitter.cf/t.co/2gelBNcXPH

icomoon.io
Joined February 2009
  • Tweets3K
  • Following220
  • Followers1.8K
55Media
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
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.

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
476
Keyamoon retweeted
IcoMoon@_vect_Oct 12
When adding new anchor points using IcoMoon's pen tool, you can keep dragging to place the point exactly where you want it. #svg_vector_editor
1
1
62
Besides vertical and horizontal reflection, diagonal reflection comes up rather frequently.
IcoMoon@_vect_Aug 28
New buttons for diagonal reflection. Intuitive keyboard shortcuts: Shift + Alt + / → Diagonal (45°) Shift + Alt + \ → Negative Diagonal (135°)
87
Keyamoon retweeted
Lea Verou, PhD
@LeaVerouAug 6
🔥 New blog post: Dark mode toggles that expose three visible states (system, light, dark) seem like the best option. Until you think about user goals, that is. Before rushing to disagree, hear me out. lea.verou.me/blog/2026/dark-… PS: As a data point, @jaffathecake was converted after reading this 😅
20
33
14
370
103,922
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/…

link param

A code demo by Ollie Williams created on CodePen

codepen.io
2
4
207
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_Jun 5
Added support for making masks in the SVG editor.
127
Keyamoon retweeted
IcoMoon@_vect_May 5
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.
1
1
10
154,098
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@shadeed9May 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.)
276
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 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
1
215
Keyamoon retweeted
IcoMoon@_vect_Apr 28
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
15
74,045
Keyamoon retweeted
IcoMoon@_vect_Mar 23
Drawing a 🚀 rocket icon in the new vector/svg editor. IcoMoon.io
1
1
1
1
484
Made in IcoMoon's own vector editor, Orbiters is a set of free SVG spinners. Copy them with a single click/tap: icomoon.io/new-app/untitled-… You can also copy them as @elmlang, @reactjs (JSX), @vuejs, and Data URI.
1
3
212
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
4
28
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
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
My first @code extension will help you to preview Icomoon icon into your style files (css, scss, less) marketplace.visualstudio.com…
4
7
12
Keyamoon retweeted
KeyCDN@KeyCDN9 Aug 2018
Icon Fonts vs SVGs – Which One Should You Use In 2018? keycdn.com/blog/icon-fonts-v… #webperf

Icon Fonts vs SVGs - Which One Should You Use? - KeyCDN

Aren't sure whether you should be using icon fonts or SVG icons? This post helps clear up the differences between both.

keycdn.com
4
6
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
Load more