cssicon-fontsreact-icons

Is there a way to make all icons the same size?

i wonder if there is a way to give all icosn of react-icons the same size? Especially if you use different icon fonts.

In my case for example I have to use two different fonts, because one font doesn't provide the necessary icon, but this looks like this:

enter image description here

As you can see, the info icon and the sign out icon look good, but the settings icon, well, not so much.

These icons in the screenshot, use the IconContext.Provider, which looks like this:

<IconContext.Provider value={{className: "mr-2", size: "1rem"}}>
                <div>
                    <props.icon/>
                </div>
</IconContext.Provider>

Now I expected all icons to have a size of 16x16 pixels. But as you can see, it doesn't really fit.

It would be great if you could give me a solution here or know any utilities that can solve the problem.

Thanks in advance!

Solution

  • TL;DR: Avoid mixing too many different icon sets

    There's no standard for icon sizes or metrics. This applies to svg libraries and icon fonts.

    Most icon libraries are designed to provide a consistent visual size and weight for all icons.
    Just like normal fonts – some have heigher capital heights and are bolder than others.

    The best you can do is to reduce the number of different icon sets and remember the different icons' origin.

    This way you could define adjusting rules to normalize the visual sizes.

    Example icon font

    @charset "UTF-8";
@font-face {
  font-family: "icomoon";
  src: url("data:font/woff2;charset=utf-8;base64,d09GMgABAAAAAALwAA0AAAAABvAAAAKZAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP0ZGVE0cGh4GYACCbhEICoJYghsLEgABNgIkAyAEIAWDGwdZG7gFyJ6DTZmLN0YIkoUnw0guc4+PcPHwtL+nc2fmYSVEJqvBoYmJ6kLdlDa5ivlbtZY9z+iCuP8BJvmAYb7YfxsiR8bky0elIiOZVMpwMv7n/2bcEgzLxjTJLIs/BhqthQGmPQ/DdUvHWigBHusJ3+6cRYtj8XBoh0PyyyPK5zQTAt48iJcAn3Z8//G5A90xECQhNEJBQs4vcQ1C0n3eOa5Cfnw1L6RgOdFb6RL0a0AOdUKWZJSAAOpohFw/HIGD+EK2RWA16KmV1MLoz/icfg3o/APwDTrXg4Tmov6UhZ4AIGSihsgAkUCCv0xQwCdCdKhBC3qDBrvBUQAFEAijpqxIuXZgPBlcsizzeWQp3mG+m98VW/dCnpQkR48sn+edPu4qIxm6XjgN/spG+Dwra3oWrK52lQXWB3rdpAzU+yte3xjkOwpO6KIzG93kwTXYcnutPwDA082X3dzJqdCH677EC6Wx8+xsNHdo2Z3RXGlpiAsN4GDdwOnUXeq37169RXbfICzruVzlIEtxiZEd/CRo0wbrAnWRTsZ3aROrwiq3u8IywgLjw5JnkkHX9ofjvsqwKgACwYz3L2zqBf8lcgHmZTQUeSeglUAw4sUKKOifQlsAxBYAoLC1IL+GSqC1EA8kAAD09AqB0OiNQNKYjEDWWIJA0diOQKWbwwjUGrcQ6GqoC1kUKUJPMpSwwVDGZkMFW05UBrITtZ7OD9nVfLt6uQwbNGzYEBxa+5MMDwEbefhMGuAwBu/TkqA2Zkm4lceYcb3OCBZpGJxc6SxprA1gKWmdEMHHY6gLy2GCh5veaVaEOsSaQBrclgP7OKhzDf/sMAOQ+FVbIiEFHzkEJCSRyDcwO+K3iCeHehljCa/KYwy2atXMkgUAAAA=") format("woff2");
  font-weight: normal;
  font-style: normal;
}
[class^=icon-], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: "icomoon" !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
}

.icon-home1:before {
  content: "";
}

.icon-home:before {
  content: "";
}

.icon-home3:before {
  content: "";
}

body {
  font-size: 5em;
}

p {
  margin: 0;
}

span {
  border: 1px solid #ccc;
  display: inline-block;
}

.adjust span {
  border: none;
  width: 1em;
  vertical-align: -0.08em;
}
.adjust .fontawsome {
  transform: scale(0.95);
}
.adjust .material {
  transform: scale(1);
}
.adjust .icomoon {
  transform: scale(0.85);
}
    <p><span class="fontawsome icon-home"></span>
<span class="material icon-home1"></span>
<span class="icomoon icon-home3"></span>
</p>

<p class="adjust">
  <span class="fontawsome icon-home"></span> Home
</p>
<p class="adjust">
<span class="material icon-home1"></span> Home
</p>
<p class="adjust">
<span class="icomoon icon-home3"></span> Home
</p>

    SVG icons

    Some icons might have a very tight viewBox, others might have some padding around for a monospaced size ... and others might not have any viewBox – usually not a great idea for responsive icon usage.

    You might also use a web app like icomoon.io to adjust sizes before generating a font/svg set.

    icomoon resizing

    So it's usually better to choose a icon set/library that ideally covers all needed icons.

    Additional icons (from different libraries) should have remotely similar metrics and styles (e.g rounded corners like "FontAwesome" vs. sharp corners in "Material icons").