Charm Icons

Charm Icons is a growing collection of MIT-licensed vector icons by Jay Newey, primarily designed for the 16x16 pixel grid - a distinctive choice that sets it apart from the majority of icon libraries which target 24x24. Each icon uses a consistent stroke-width of 1.5 with round linecaps and linejoins, resulting in a soft, friendly aesthetic. Icons use fill="none" and stroke="currentColor", making them easy to style with CSS. The 16x16 grid makes Charm particularly well-suited for compact UI elements, small navigation items, and situations where space is at a premium. The library currently includes 261 icons covering common UI needs: navigation, actions, communication, media, files, social, development, and more. Compared to GitHub Octicons (which also has 16px variants but does not use the stroke-width property), Charm offers more customization through adjustable stroke widths. And compared to Lucide (designed for 24x24), Charm is optimized to look crisp at smaller sizes. The npm package (charm-icons) is built to be fully treeshakable with ES Modules, so you only bundle the icons you actually use. Icons can be placed in HTML using data attributes (data-charm="heart") and the placeIcons() JavaScript API handles SVG injection. A UMD bundle is also available via unpkg CDN for quick prototyping. Charm is indexed on Iconify (prefix: charm) giving access through Iconify component libraries for React, Vue, Svelte, and Ember. Icons can also be browsed on icones.js.org. Design guidelines are well documented: all icons maintain 1 pixel padding inside the viewBox, align outer edges to the grid, use geometric primitives over paths where possible, and follow optical sizing principles (circles are overshot from squares for visual balance). The project follows semantic versioning with automated releases.