charm-icons
Advanced tools
Charming Open Source vector icons.
charm-icons is a (growing!) set of MIT Licensed vector icons primarily designed for the 16x16 pixel grid. They are designed to be simple and flexible.
You can take a look at the icons on CodePen or have a quick look below:
You can also look at the icons on icones.
charm-icons takes inspiration from the following icon sets but tries to differ in key aspects.
stroke-width property, unlike charm.
charm allows for more customisation, and the icons tend to be smaller in file size.charm aims to look best at 16x16 pixel resolution.
charm may work quite well alongside Lucide (be wary of design differences!).charm-icons is also built to be fully treeshakable with ESModules.
You can install via npm:
npm install charm-icons
# or
yarn add charm-icons
Note: The CDN version contains every icon - likely more than you will use. NPM installation is recommended so you can treeshake only the icons you need.
<script src="https://unpkg.com/charm-icons@latest/dist/umd/charm.js"></script>
<script src="https://unpkg.com/charm-icons@latest"></script>
charm is available via iconify.
Iconify has component libraries for React, Vue, Svelte and Ember.
You may use the SVG files (found here) however you please. If you are using them in a javascript project, charm-icons provides a basic API for handling them.
Following are some examples of using the API to insert an icon into your webpage:
Your html will look like this:
<i data-charm="heart" class="my-class"></i>
<i data-charm="face-smile" class="my-class"></i>
<i data-charm="thumb-up" class="my-class"></i>
Your javascript will look like one of the following:
// Include the icons you need.
import { placeIcons, Heart, FaceSmile, ThumbUp } from 'charm-icons';
// Tell `placeIcons()` to replace them.
placeIcons({
icons: {
Heart,
FaceSmile,
ThumbUp,
},
});
// This will still bundle any unused icons.
import { placeIcons, icons } from 'charm-icons';
placeIcons({ icons: icons });
<!DOCTYPE html>
<body>
<i data-charm="flame" class="my-class"></i>
<script src="https://unpkg.com/charm-icons@latest"></script>
<script>
charm.placeIcons({ icons: charm.icons });
</script>
</body>
See this codepen demo for a working demo of this section.
You can use any icons you like with the API, provided the icon is an object with the following attributes:
| Attribute name | Type | Description |
|---|---|---|
name | string | The name of the icon in kebab-case |
paths | string | The svg content |
keywords | [string] | A list of relevant keywords (may be empty) |
For example, let's make our own test icon, a copy of conical-flask with a different name:
<body>
<div>
<i data-charm="test"></i>
</div>
</body>
const Test = {
name: 'test',
paths: '<path d="m4.75 1.75h6.5m-6.5 8h6.5m-5.5-7.5v4.5l-4 7.5h12.5l-4-7.5v-4.5"/>',
keywords: ['beaker', 'development', 'experimental', 'lab', 'science', 'study'],
};
You can then pass the new icon to placeIcons():
charm.placeIcons({ icons: {Test} });
charm.placeIcons({ icons = {}, attrs = {}, replaceAttr = 'data-charm' })Replaces all elements with the replaceAttr attribute with the respective icon.
icons
{ AtSign, Tick }iconsattrs
placeIcon e.g { class: "my-class my-other-class"}replaceAttr
placeIcons replaces all elements with the replaceAttr (by default 'data-charm') attribute with the icon specified, e.g data-charm="at-sign".
kebab-case for the icon name (at-sign instead of AtSign)charm.toSvg(icon, attrs = {})Converts an icon object to an SVG string.
icon
attrs
charm.toElement(icon, attrs = {})Converts an icon object to an SVG HTMLElement
icon
attrs
charm.replaceElement(element, icon, attrs = {}, replaceAttr = 'data-charm')Replaces a HTMLElement with an icon.
element
HTMLElement to replace.icon
HTMLElement and placed.attrs
replaceAttr
replaceAttr when invoked by charm.placeIcons().getAttrs(icon, attrs = {})Get the combined attributes of an icon and given attributes.
icon
{name, paths, keywords})attrs
charm and charm-<icon name> classes are added to all icons by default. Use these classes how you please.Contributions are warmly welcomed. If you are contributing icon designs, please read the icon design guidelines.
Please use the GitHub issue tracker to track issues.
Please see the icon request issue template for submitting icon requests.
Use this badge to let others know you're using Charm Icons!
[](https://github.com/jaynewey/charm-icons)
FAQs
Charming Open Source vector icons.
The npm package charm-icons receives a total of 26 weekly downloads. As such, charm-icons popularity was classified as not popular.
We found that charm-icons demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Multiple high-impact npm maintainers confirm they have been targeted in the same social engineering campaign that compromised Axios.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.