Introduction

I recently came across an interesting blog – http://www.n8d.at/blog/office-365-icon-font-documentation/ which mentions O365 icons. This was back in February so when I attempted to locate these fonts so I could use them in some of my work. I could not located the file on the CDN that was mentioned. I kind of shrugged it off for a while but recently needed the icons again. So I went digging inside O365 and I found them. They are there if you want to use them. I’ll show you what classes to use. I also pulled the files which I’ll provide a link to at the end of the blog so you can download them and use them and not have to worry about CDN’s.
I found all the O365 icon inside my O365 Portal. I downloaded the web fonts and a portion of the css file that has the code for the icons. Using this approach you would be locked into the current icon. Microsoft is likely to continually update the icon & css, so this set would eventually become stale. If there ever is an official CDN I’d switch to that. If you’re on office 365 you don’t need to link to any fonts or css. You are able to just take advantages of the icons immediately you just need to look at my chart to see the classes or determine the code for the css content. If you don’t understand anything about using web fonts or what office 365 icons are, read the blog I mentioned above. That should bring you right up to speed.

Installation

  • copy the css & font folder to your on prem site
  • link to the css file in your masterpage or page (adjust path as needed)
  • you can implement one of the icons using something like this below
  • i have additional styles for color, font size, and spacing. view the source to check that out

Explanation of the Grid

  • the orange tiles are icons that are available by using the css:after { content: ‘code’; } or if you copy the supplemental css above
  • the blue tiles are icons that have classes in O365. you can use those classes in directly on your o365 site without attaching any styles or fonts
  • the black tiles are dead, meaning they don’t show or are not in the font package but may be in the official css and have not been purged.

The concept of using fonts for icons is nothing new and if you are not exactly familiar with that check out Font Awesome or Glyphicons. The concept is that fonts will scale nice, the are light weight and fully loaded once when you hit the site. You can easily resize them and re-color them. No need for messing around with images.

Where I found the files

Fonts
https://outlook.office365.com/owa/prem/16.0.772.13/resources/styles/fonts/office365icons.svg
https://outlook.office365.com/owa/prem/16.0.772.13/resources/styles/fonts/office365icons.eot
https://outlook.office365.com/owa/prem/16.0.772.13/resources/styles/fonts/office365icons.ttf
https://outlook.office365.com/owa/prem/16.0.772.13/resources/styles/fonts/office365icons.woff
CSS
https://prod.msocdn.com/16.00.0791.004/en-US/css/shellg2corecss_f727a58f.css

Download Files Here

Screenshot of all the possible icons –> see full preview site above for a live example

1
2
3

4

5
6
7
8

Download Files Here

Thanks for checking this out

Comments
  • Jason Webster
    Posted at 10:18 am September 4, 2016
    Jason Webster
    Reply
    Author

    Great Work – Thanks. I am going to look to add a Skype Icon as well. Other than that, it fit my need perfectly.

  • Onlinecores
    Posted at 7:08 pm May 7, 2016
    Onlinecores
    Reply
    Author

    I have searched a long time for this ms fonticons, thank you for your contribution

  • Leave a Reply to Onlinecores
    Cancel Reply