halfmage / majesticons

👑 Free Version – A versatile, beautiful, and scalable iconset. 760 icons each in line and solid style.

Majesticons - A high-quality SVG iconset that you can use for your web projects, your application, or print them to hang them on your wall! MIT-licensed

majesticons.com • Figma community file • Browse free icons • Get 3000+ icons

---

Some facts for you: All icons are ...

• designed to be used in a variety of topics
• made with a basic 24x24 pixel grid
• build with strokes (line-version)
• optimized with SVGO

Usage

To use these icons in your project, simply copy and paste the SVG sourcecode in your HTML:

<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path
    d="M7 8h10M7 12h5m4.8..."
    stroke="currentColor"
    stroke-width="2"
    stroke-linecap="round"
    stroke-linejoin="round"
  />
</svg>

Contribute

Let me know if you use majesticons, I would like to prepare a showcase section on the website! If you run in any errors or have suggestion, please let me know via email or create a github issue 👋

majesticons's Issues

transforms

I was unaware you also did this icon set.

I tried to integrate majecticons into https://iconexplorer.app and ran into a problem. I use an SVG flattening technique but ran into a few issues with a small number of icons that use transform on some circles. Most notably this one: https://github.com/halfmage/majesticons/blob/main/line/stop-circle-line.svg?short_path=920ef85

I am wondering if you would be amenable to changing some of these?

Several icons cannot be converted to web-fonts using tools such as Fontastic or Fontello

Background explanation

Using the icons as suggested in the readme (i.e. injecting svg directly into the web page) is not very scalable. In modern apps, the icons are preferably embedded into custom web-fonts, providing a nice level of abstraction between the icon name and the actual svg code.
Copy and pasting the same svg everywhere can very rapidly become a nightmare in big apps for several reasons :

• if you copied the same svg at several locations and want to replace it, you have to change it everywhere
• each copied svg would have to be styled as its own separate markup entity which is not desirable

Instead, I would generate a custom webfont from the icons I like, using tools such as Fontastic or Fontello. This webfont would be loaded once and cached correctly into clients browsers. Then I can abstract the font glyph even further by creating a custom vuejs or react (or whatever modern js framework) component icon so I can write this in my code <icon name="user" /> or <icon name="arrow-up" />. The font is loaded once, and I can style the whole font on its own as I would with any kind of actual text, which is awesome.

The actual issue with majesticons

The reason I am saying all this is because with several icons in Majesticons (I tested 6 or 7 of them), the tools that perform the conversion from svg to web-fonts (Fontastic and Fontello are those I tested) complain that the svg markup cannot be converted properly. Fontello gives a warning while importing e.g. the plus icon like this :

The fontello github repo actually gives very thorough explanations about the limitations of web-fonts from SVG.

Fontastic (which is a bit clunky to be honest) messes up the icons like so (I imported both the svg copied from majesticon directly, then copied the svg generated by Figma from the project):

By the way the empty icon on the left is the plus icon I mentioned earlier. While generating this set, Fontastic simply crashes. This kind of issue never occured while using svg markups from fontawesome.

I am not an svg specialist and don't have any clue about the level of compromise needed to pass those limitations, but I think this would be very desirable that the icons in Majsticons could be converted directly to webfont glyphs.

Sorry for the wall of text by the way 😅

Different icons here and in the npm package?

I'm trying to use the npm package of these icons, but it looks like there are differences between this repository and the package.

For example, I see here a "map" icon that doesn't exist in the npm package, where there are multiple map-*.svg icons.

Icon wishlist

👍 A place to mention icons that you miss and would like to be added!