DEV Community

Cover image for πŸ’„ How to use Microsoft Fluent UI Icons on your website?
Max Programming
Max Programming

Posted on • Updated on • Originally published at blog.usmans.me

πŸ’„ How to use Microsoft Fluent UI Icons on your website?

πŸ‘‹ Hey Developers!

I really love the icons used and provided by Microsoft in their products. And I always wish to use them in my projects. But it is pretty hard to find a way to use them. This post will help you to use them in your project!

It is pretty easy to set this up on both static and React apps.

🌐 Setting up on a static site

If you want to use it in your static site, you can include Fabric UI Core's CDN in your <head> like this πŸ‘‡.



<link
  rel="stylesheet"
  href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/11.0.0/css/fabric.min.css"
/>


Enter fullscreen mode Exit fullscreen mode

And once you have added that, it's as easy as doing this πŸ‘‡.



<i class="ms-Icon ms-Icon--Mail" aria-hidden="true"></i>


Enter fullscreen mode Exit fullscreen mode

image.png

You can refer this site and use any icon you want. Just copy the name and paste it in the place of Mail.

image.png



<i class="ms-Icon ms-Icon--Settings" aria-hidden="true"></i>


Enter fullscreen mode Exit fullscreen mode

image.png

βš› Setting up in a React App

There are 2 ways you can achieve this. 1st one is to include the CDN in the <head> tag in public/index.html and then use the <i> tag as we did in the static type. But I recommend the 2nd way which is better.

Install the @fluentui/react-icons package in your app using npm or yarn as per your preference.



npm i @fluentui/react-icons
## OR
yarn add @fluentui/react-icons


Enter fullscreen mode Exit fullscreen mode

Once you do that you can easily import the icon components and use them in your app just like this one πŸ‘‡



import { MailIcon, SettingsIcon } from '@fluentui/react-icons';

function App() {
  return (
    <div>
      <MailIcon /> { /* Without any element */ }
      <button>
        <SettingsIcon /> { /* Within any element */ }
      </button>
    </div>
  )
};

export default App;


Enter fullscreen mode Exit fullscreen mode

As I said you can refer this site and copy the icon name and just append Icon after it.

Example: MailIcon, FeedbackIcon, etc.

I hope this post helped you achieve your goal. Please give it a like πŸ’™ if you liked it. And share it if you want. Learn more about Fluent UI

Good luck πŸ‘ and thanks for reading!

Top comments (7)

Collapse
 
alfredosalzillo profile image
Alfredo Salzillo

No One really likes Microsoft fluent design, neither the icons set.

Collapse
 
_mosiatj profile image
Mosia TJ

Speak for yourself. That is quite offensive to some MS fans like myself. lol

Collapse
 
sendy profile image
Sandeep

It's my fav as well!

Collapse
 
maxprogramming profile image
Max Programming

TBH, It's one of my favourite icon set. And I have heard from many people who like it too. It's just a matter of opinion. Which is different in our case πŸ˜‰

Collapse
 
tominekan profile image
Tomi Adenekan

I do πŸ˜€.

Collapse
 
thorstenhirsch profile image
Thorsten Hirsch

I would love to see an icon set from Pininfarina... πŸ˜‰

Collapse
 
ray_trucos_30bae1f896f409 profile image
Ray Trucos

Thank you so much, I love Microsoft Fluent Design & Icons