Icons

Overview

Icons are small simple graphics used to help convey meaning, assist in pushing a message, or provide information at a glance. The MicroStrategy web team uses icons in various scenarios across the corporate website to achieve these effects.

We use an icon font to display icons on the website. Much like a regular font family, an icon font stores glyphs for each character in the font family. The exception is the font stores the icon glyphs rather than the characters for letters, numbers, and punctuation. This allows for easy setup with the use of CSS classes and improves flexibility in icon sizing, coloring, and style manipulation.

Creating an Icon

To create an icon, simply use the <i> element with the icon class and an icon reference class.

        
HTML
<i class="icon icon-star"></i>

You can also use the <a> element if you need to link the icon.

        
HTML
<a href="#" class="icon icon-touch"></a>
Back to top

Sizing an Icon

To make an icon smaller or larger, just add one of the global sizing classes. An icon's default size is medium.

        
HTML
<i class="icon icon-cube small"></i>
<i class="icon icon-cube jumbo"></i>

Back to top

Coloring an Icon

To change the color of an icon, simply add one of the global color classes. An icon's default color is black.

        
HTML
<i class="icon icon-web blue"></i>
<i class="icon icon-web green"></i>
Back to top

Icon Blocks

Icon blocks allow for flexible sizing of background colors around an icon. To create an blocked icon, add the icon-block class.

        
HTML
<i class="icon icon-block icon-arrows-in"></i>
<a href="#" class="icon icon-block icon-arrows-out"></a>

You can size icon blocks just like you would regular icons using a global sizing class. The default size for icon blocks is medium.

        
HTML
<i class="icon icon-block icon-calendar small"></i>
<i class="icon icon-block icon-calendar large"></i>


By default, icon blocks are square. You can make them circular by using the round class.

        
HTML
<i class="icon icon-block round icon-ban"></i>

Global color classes can be used to change the color of an icon block. The default color for icon blocks is gray. If you are using brand icon blocks, you can use the brand-color class to change the background color to the brand's color.

        
HTML
<i class="icon icon-block icon-share red"></i>
<i class="icon icon-block icon-facebook brand-color"></i>
Back to top

Icon Block Groups

Similar to button groups and text block groups, if you have multiple icon blocks that are in a group, you can use a <div> element wrapper with the icon-block-group class to allow for group sizing, coloring, and layout.

        
HTML
<div class="icon-block-group">
  <i class="icon icon-block icon-analyst"></i>
  <i class="icon icon-block icon-developer"></i>
  <i class="icon icon-block icon-administrator"></i>
</div> <!-- /icon-block-group -->

If you want your group of icon blocks to automatically size themselves to fit the space of their container, add the expand class. This class is responsive supported along with the shrink class.

        
HTML
<div class="icon-block-group expand">
  <i class="icon icon-block icon-analyst"></i>
  <i class="icon icon-block icon-developer"></i>
  <i class="icon icon-block icon-administrator"></i>
</div> <!-- /icon-block-group -->

By default, icon block groups are aligned horizontally. If you want to make them align vertically, use the stack class. This class is responsive supported along with the unstack class.

        
HTML
<div class="icon-block-group stack">
  <i class="icon icon-block icon-analyst"></i>
  <i class="icon icon-block icon-developer"></i>
  <i class="icon icon-block icon-administrator"></i>
</div> <!-- /icon-block-group -->

You can remove the spacing between icon blocks in a group by using the collapes class. This class is responsive supported along with the uncollapse class.

        
HTML
<div class="icon-block-group collapse">
  <i class="icon icon-block icon-analyst"></i>
  <i class="icon icon-block icon-developer"></i>
  <i class="icon icon-block icon-administrator"></i>
</div> <!-- /icon-block-group -->

Use the global sizing classes to size all icon blocks in the group.

        
HTML
<div class="icon-block-group large">
  <i class="icon icon-block icon-analyst"></i>
  <i class="icon icon-block icon-developer"></i>
  <i class="icon icon-block icon-administrator"></i>
</div> <!-- /icon-block-group -->

Icon blocks in a group can be colored all at once by adding a global color class to the container or colored individually. You can also use the brand-color class on the container to automatically color all recognized brand icon blocks with their corresponding brand color.

        
HTML
<div class="icon-block-group orange">
  <i class="icon icon-block icon-analyst"></i>
  <i class="icon icon-block icon-developer"></i>
  <i class="icon icon-block icon-administrator"></i>
</div> <!-- /icon-block-group -->

<div class="icon-block-group">
  <i class="icon icon-block icon-analyst red"></i>
  <i class="icon icon-block icon-developer blue"></i>
  <i class="icon icon-block icon-administrator green"></i>
</div> <!-- /icon-block-group -->
Back to top

Icon Class Reference

In order to setup a specific icon, you have to use its icon reference class. Below is a list of all the currently available icons and their reference classes.

# Symbol CSS Class Name
Back to top

Adding New Icons

If you want to add new icons to the icon font, follow the steps below.

Only Web Team designers should be handling this process. If you have an icon idea or need to add a new one, speak to a designer on the Web Team.

Designing Icons

The website uses thin-stroked, no-fill icons. When designing your icons, be sure to follow this theme for consistency.

Because thin-stroked icons begin to blur when their strokes are below 1px, like in scenarios when they are scaled down, the design process requires three designs of the same icon at different sizes: 16px, 32px, and 64px. At smaller sizes, details need to be less so that the icon can be recognizable at the size.

The best tool to use is Adobe Illustrator. Start by creating three artboards, one for each required size: 16px, 32px, and 64px. Setup all of your designs within the artboards, ensuring that the largest dimension is scaled to the edges of the artboard. Use strokes only, and be sure that they are set to 1px for each size.

Setting up Illustrator artboards to design icons
Ideal Adobe Illustrator setup for designing new icons.

Exporting Icon Files

Once you have finished your designs and setup, you want to convert all the strokes to fills. This prevents rendering issues when uploading the new icons to the icon font. You can easily convert strokes to fills by selecting all the paths of all the icons you wish to export and selecting Object > Path > Outline Strokes. You want to also make sure you merge all of the fills together by going to Window > Pathfinder and, in the Pathfinder panel, selecting the Unite button under Shape Modes.

Now that the icons are setup for export, go to File > Save As... and in the dialog box, select SVG (svg) under Format and check Use Artboards. You can use whatever name here you want as you will be renaming the files after you export them. When you are ready, click Save and click OK in the dialog box with default settings. This should create .svg files for each size design for your icons.

Exporting icons into SVG format
Exporting icons into SVG format.

Once exporting is complete, you want to rename these to a specific naming structure. The format should be class-name_size.svg, all lowercase, with no spaces. class-name should be the name of the class that will be used to reference the icon glyph and use dashes to separate words._ is required and is used to separate the class name from the size. size should be small for 16px, medium for 32px, or large for 64px.

It's recommended to come up with a unique class name for your icon that describes what it is rather than what's its purpose is on the website. This will allow for better organization and easier reuse of the icon across the website.

Generating the Icon Font

We use a web app called Icomoon to generate the icon font for the website.

To begin, its very important that you get the most up-to-date selection.json file from the stage server's Media Library. It's located in the folder called icons.

Once you have the selection.json file, go to the Icomoon website. Once you are there, click the Import Icons button at the top and select the selection.json file. When prompted with Would you like to load all settings stored in your selection file?, click Yes. This should upload all of the icons in the most current version of the icon font.

Uploading all current icons into Icomoon
Uploading all current icons into Icomoon.

At this point, you are ready to upload your new icons. To do so, click the hamburger menu on the right side of the icon set and click Import to Set. Select your new icon .svg files and click Open. This should add your new icons to the set.

The icons will be grayed out when first uploaded to the icon set. Be sure they are selected by clicking the Select arrow button at the top and clicking on the icons. If they are selected, they will have a white background with a yellow border.

Uploading new icons into Icomoon
Uploading new icons into Icomoon.

Once all icons in the set are selected, click Generate Font at the bottom. This will take you to a new screen where each glyph is listed out with its name and unicode. If you already renamed your icons before uploading them to Icomoon with the required naming convention, you shouldn't have to do anything here. If not, you can rename your new icons to the required naming structure on this screen. Once you are ready, click Download at the bottom. This will save a .zip file of all the necessary files for the icon font.

Setting Up Icons on Website

Unzip the icon font file. Inside there is a folder called fonts. That folder contains all the font files that need to be uploaded to the CMS. To do so, go into the stage server Media Library, find the icons folder, which contained the selection.json file, and replace each font file with the Update button.

Be sure to also replace the selection.json file in the icons folder with the one from the unzipped icon font folder. This will ensure the next person to update the icon font will have the most up-to-date data for Icomoon.

Next step is to create the CSS icon classes for the new icons. In the icons.less file located at /CMSTemplates/microstrategy/css/less/components/icons.less within the repository, find where the other icon classes. Add the class names you used to name the files before uploading to Icomoon, and places them in alphabetical order with the .icon-sizes LESS mixin. The mixin takes in three values: the unicodes for each size of the icon, from small to large. To find these unicodes, reference the styles.css file in the unzipped icon font folder outputted from Icomoon.

        
LESS/CSS
&pencil-paper { .icon-sizes("\eaa4", "\eaa5", "\eaa6"); } // small, medium, large

If you are unfamiliar with the MicroStrategy Web team's processes for CMS staging, LESS compiling, Git branch pulling, pushing, and merging, and Team City deployment, you should stop reading this and hand this to a designer or developer on the Web team that does.

Once you have added your new icon class names and unicodes, follow the normal process of compiling the LESS, pushing to the remote Git repository, and deploying in Team City. Ensure you also sync the update icon font files, including the selection.json file to all the production servers and the dev1 server.

Back to top