Article
14 comments

Office 365 Icon font documentation

I’m not quite sure when it happened. During the last twosome of months, Microsoft provides some icon fonts in Office 365.Especially the newly introduced app launcher makes use of icons of this typeface.The content varies from icons, such as the Hamburger menu, arrows, general, UI elements, as considerably as all Microsoft Applications. The files of this font are hosted on the Microsoft CDN so they are ready to use to spice up Apps.

Office 365 Glyphs - Preview

Office 365 Glyphs – Preview

Why to use icon fonts?

Icon fonts provide a couple of benefits. Fonts are scaled better than any image across different screen resolutions and even looks great on high density displays without any loss of quality.
There is another advantage to use this font. By using the same icons as in Office 365 you will be able to provide a consistent user experience.
Microsoft created a while ago some UX Guidelines for Apps in SharePoint, but you won’t find any information on the icons.

How to get access to the icon font of Office 365?

As mentioned earlier CDN is the key. Microsoft provides some centralized assets there. There is only one problem the use of a CDN is mostly undocumented. One general documentation can be found on the MS Technet.
There are several CDN endpoints and in case of SharePoint only one url exist in Office 365 for a long time. This URL is //cdn.sharepointonline.com. This url can be accessed via http (port 80) and http’s (port 443).
To make use of the icon font the following code needs to be used in your courses.

@font-face {
    font-family: "SPO365Icons";
    src: url("//cdn.sharepointonline.com/14025/_layouts/15/fonts/Office365Icons.eot");
    src: url("//cdn.sharepointonline.com/14025/_layouts/15/fonts/Office365Icons.eot?#iefix") format("embedded-opentype"), 
         url("//cdn.sharepointonline.com/14025/_layouts/15/fonts/Office365Icons.woff") format("woff"), 
         url("//cdn.sharepointonline.com/14025/_layouts/15/fonts/Office365Icons.ttf") format("truetype"), 
         url("//cdn.sharepointonline.com/14025/_layouts/15/fonts/Office365Icons.svg#web") format("svg");
    font-style: normal;
    font-weight: normal;
}

You might recognise the path in there that points to “_layout/15 “ which is the current version of SharePoint. The path before the layouts fairly undocumented and might change over time. I try to maintain those urls in future until there is an official documentation available.

Content of the icon font

The font-face definition can be added to the custom style sheet of your app. Again the content of this font is undocumented as well.
This was the reason why I set up a small interactive documentation that use the CDN urls and shows all relevant icons. So you don’t have to search all the 65536 glyphs (or characters).
The guide be found on my newly created lab site under the url lab.n8d.at.
A page that I’m looking forward to maintain in the future and add some additional information and things there.
Following the principles of “Ship or die”. The mobile support is currently beta too. I’m looking forward to provide a superb user experience.
If you have any comment, suggestion how to improve. Please feel free to comment. I will be lucky to hear from you.

14 Comments

  1. Nice! I wish that Microsoft would document this stuff and version it more cleanly. I’d be a little concerned about using these fonts because Office365 changes so frequently and abruptly. Having the /15 in the URL makes it seem a little more reliable, but also seems odd because most current SPO content is in /16.

    M.

    Reply

    • Thank you very much, Marc. While I was searching for CDN Urls and additional information I saw a pile of old urls that even didn’t exist anymore. Actually the font exists in three to four other goals as well. Depending where you look into.
      In case of the versioning and the glyphs I try to stay up to date. I will also take a look if some new icons approaches.

      /Stefan

      Reply

  2. Nice Stefan.
    That’s funny… Over the weekend, while working on a chat/discussion widget, I wanted to incorporate the ability to play a sound when message arrived… I found that SharePoint o365 was already emitting sounds via their toaster alerts… I got it when I logged in as a new user and showed a toaster indicating I had to set my timezone… I then found some sound files were being served from their cdn as well… I certainly agree that having some way to announce these to user/devs. would be nice, so that we don’t have to provide our own (and fall into the pit of multiple users uploading the same Font/Images but on different sites … just like what happens today with jQuery :)).

    The lack of this information is also why I created a way to browse and use the images that currently come with SharePoint (thanks to Marc’s help) – https://github.com/purtuga/SPImages.

    Reply

  3. This maybe a naive question (!) but are there any restrictions using these icon fonts in blog posts ( theme css) . I see these being handy in as visual clues. If not , is it just a case of adding the fonts as you describe but also a number of classes to use in with divs/spans.

    Reply

    • Microsoft is changing the URL’s of the fonts during their deployment circles and I have to maintain the urls too. If you use those in a theme css make sure you have the correct CDN Url directly from SharePoint because otherwise it may break sometimes and display just a static box instead of the icon.
      For the use in blog posts you have to maintain the CDN urls too and updated them regularly.
      Since I launched the icon font documentation I had to change it monthly in order to work.
      On the restrictions: Hard to say because I couldn’t find an official license file according to the font.
      /Stefan

      Reply

      • Thanks for your your reply . Unless there is a way of downloading the fonts ( font-squirrel?) and say the CSS from MS, I am inclined to think is this worth the effort esp/. if you these are added to multiple posts.

        Reply

        • Actually you are able to download the fonts directly from SharePoint Online. I don’t think that they are locked to a specific domain. From my point of view they should make the font public available and ready to reuse in Apps for Office 365.
          /greetings
          Stefan

          Reply

          • As per your suggestion I have placed all but the .svg format in a fonts dir on my (wp) child theme. The latter gives me a dns failure. I have adjusted the urls in my CSS so ready to give a test

          • So you adjusted the urls of the @fontface definitions to point to your sub theme and still got a DNS error? If so then it is likely that MS in the mean time have DNS bombed their fonts.
            I tried it a couple of month before an those worked at that time.
            Let’s hope the will provide a better way in future.

          • Hi
            Stefan , I want to re-add these to a horizontal widget area in a WP site.I wondered if this still the best approach to load from CDN and unassuming they included all the latest icons such as Forms, PowerApps and Flows. Another resource I am looking at is http://aka.ms/CnESymbols.

  4. I’m not sure I’d trust them not to change this in the future.

    Personally I use Metro Studio for this kind of stuff. It would be nice if they had a webfont export option…

    Reply

    • Metro Studio is a nice little tool.
      Microsoft won’t never change the position of the single characters in future otherwise they will run in a big trouble all over Office 365.
      I agree with you there is room for improvement. I will add the documentation of another icon font too but this can be used only inside of Office 365 and provides a more stable usage in Office 365.
      /Stefan

      Reply

Leave a Reply

Required fields are marked *.


This site uses Akismet to reduce spam. Learn how your comment data is processed.