Jam icons is a set of icons designed for web projects, illustrations, print projects, etc. Shipped in JavaScript, font & SVG versions. Licensed under MIT. Icons: https://jam-icons.com
Jam Icons v2 is a totally new version of this icons set. Read more below, especially if you are using the first version. Each icon has been re-shaped with a 2px stroke on a 24x24 grid. I mainly used a 20x20 grid, letting 4px for extra design. Recreating the entire set was huge, but needed. I wanted the set to be more reliable, more consistent, and bigger.
This version is shipped in three formats: JavaScript, SVG and font and contains more than 890 icons.
The recommended approach. It turns your tag into a clean svg markup. You just have to use the data-jam attribute inside a span or a whatever tag to select your icon (The attributes are listed below). So if you write:
<span class="your-custom-class" data-jam="backpack" data-fill="#222"></span>It becomes:
<svg class="jam jam-backpack your-custom-class" data-fill="#222">[...]</svg><script src="https://unpkg.com/jam-icons/js/jam.min.js"></script>$ npm install jam-icons
Just hit the download button and use a script tag like below:
<script src="/path/to/js/jam.min.js"></script>data-jam (required) The icon you want to use, e.g data-jam="backpack"
data-fill (optional) RGB or Hexadecimal, e.g data-fill="#F5C25A"
data-width (optional) Integer, e.g data-width="32"
data-height (optional) Integer, e.g data-height="32"
You can easily customize your icons using css, such as width, height and color. I provided the data-fill, data-width and data-height attributes to support a direct way to color the icon, in the case you do not want to add extra lines of css.
The alternative approach. You load the CSS stylesheet and use Jam icons as a font icons. You just have to use the jam class followed by the name of the icon you want to use prefixed by jam-, like below:
<span class="jam jam-backpack"></span><link rel="stylesheet" href="https://unpkg.com/jam-icons/css/jam.min.css">$ npm install jam-icons
Just hit the download button and use a link tag like below:
<link rel="stylesheet" type="text/css" href="/path/to/css/jam.min.css">The complete set as independents SVGs files is available too. Hit the download button to download it.
You can see the complete icons list on https://jam-icons.com
If you have some icons ideas, please open a new issue, add a icons-request label and make your proposal.
Likewise, if you see a bug or something that needs to be fixed, please open a new issue too with a bug label.
Unfortunately, the v2 is a major version including major breaking changes: I kept the icons names availables in the v1 but the shapes are totally new. If you give it a go, try with JavaScript ✌️
The v1 is still available on https://jam-icons.com/v1/
Jam icons is following the Semantic Versioning with the MAJOR.MINOR.PATCH format.
- V2.0.0 - New release with 896 icons
- V1.0.72 - Optimizing SVGs
- V1.0.0 - First release with 422 icons
This project is licensed under MIT