Using Segoe Fluent Icons

Ask the community
1

Hi,

How can I use the Segoe Fluent Icons in my designs?

e.g. I need to add a “Home” icon to my list item:

image
image1177×705 15.1 KB

I can see the unicode points here. What is the best way to do this?

1 Like
2

I tried downloading the icon font but I don’t see an easy way to insert the icons because it doesn’t seem to support ligatures like Material Icons do (where you can just type the name of an icon and it appears).

May be better off using something like this plugin than the font: Microsoft Fluent UI Icons by Iconduck | Figma Community

1 Like
3

This will do. Thanks alot.

4

Hi @Kyle19,

I know its waaay late but I found how it actually works.

  1. Instal MDL2 fonts
  2. Find it in Font Book
  3. Open font family to see icons
  4. click on icon you want
  5. icon will display with code beneath
  6. copy the code as text in figma, as the icon actually text
3 Likes
5

Nice! This worked for me

1 Like
6

@Ivan_Perovic Sorry, I didn’t get it. Where do you open the font family to see icons? I use Segoe Fluent Icon font, copy the code from Segoe MDL2 Assets icons - Windows apps | Microsoft Learn but it’s still presented as text, not icon…

7

Hey @Inna_Donets,

If you are on Mac, you open it on FontBook.

Hope this solves it!

8

I used this method, it works, but it’s showing the wrong icon :sweat_smile: