Icon Font

[designnatix]

Hello,

Is there an icon font with the Carbon icons similar to FontAwesome? Icon fonts make it quite easy to use icons. If not is there a preferred practice for using the Carbon icons and pictograms?

Thx!

[joshblack]

Hi there, @designnatix! 👋

Unfortunately, given the size of the icons available, we do not offer an icon font 😞 Some additional reasoning can be found here under the FAQ section.

Ideally, you can use the icons through the packages provided, either @carbon/icons for direct SVG access or one of the framework implementations like @carbon/icons-react and @carbon/pictograms-react.

Hope this helps!

Quick edit

I believe the current intent is for teams to take advantage of the Sketch Libraries that are available under this section: https://www.carbondesignsystem.com/designing/kits/sketch/#get-the-kit. Under Step 3, there should be a link for libraries that have the sketch symbols for the different sizes of icons.

Unfortunately, these are Sketch-specific so it wouldn't help out much with Axure, Figma, Adobe XD, etc. But I hope this helps out!

[designnatix]

Thanks, Josh. My request is for design not development. Icon fonts simplify using a large set of icons. Instead of locating, finding, and inserting a flat-file I type a character/glyph in the icon font. I can change icons more easily by typing a new character. As well, I can easily change size and color. Icon fonts are an efficiency gain for designers.

[joshblack]

Thanks for the response, @designnatix!

Definitely see what you mean with the convenience factor of using the icon font. Could you share more about your process in which you're looking to include icon fonts? Maybe I can help find out a solid middle ground between the two approaches 😄

[designnatix]

Sure! Having an icon font allows designers to place an icon or pictogram into their design files (Sketch, Axure, etc.) by typing a character. It's an order of magnitude or two easier and faster than doing the same through flat files. As well, changes to that icon equally benefit if the icon/pictogram is a character instead of an svg/png, etc. It would be great if all of the Carbon icons/pictograms could be like included into one font file similar to how font-awesome does it. That is the design best practice for managing individual icons. Thank you!

[joshblack]

Ah, got it. Thanks! I believe the current intent is for teams to take advantage of the Sketch Libraries that are available under this section: https://www.carbondesignsystem.com/designing/kits/sketch/#get-the-kit. Under Step 3, there should be a link for libraries that have the sketch symbols for the different sizes of icons.

Unfortunately, these are Sketch-specific so it wouldn't help out much with Axure, Figma, Adobe XD, etc. But I hope this helps out!

[mzdm]

I would love to see this too. Having Icon Fonts would also suit better for the mobile target (Android/iOS). For example on the Flutter framework using Icon Fonts is the "native" way and as mentioned this makes it easy to change size/colors via this way (I was about to make a package with Carbon icons but SVG requires using libraries as it is not a native way there)

[dimitrihoffmann]

This would really be amazing, especially when you got to use other tools than sketch for any animation or prototyping work. Right now it is a pain to get the correct icons in.