<!-- Example icon -->
<span class="icon icon-success"></span>
<!-- Example icon -->
<span class="icon icon-success"></span>
The Icon is purely functional. It provides a visual cue when it is part of an interactive element such as a form field.
<!-- Example icon -->
<span class="icon icon-util-success"></span>
Illustrative icons are rendered as background-images since they contain colors and are not packaged as a font.
To render an illustrative icon, use the .icon-illustrative class with the icon class name you want to render.
Use Illustrative Icon when:
Conveying a celebratory moment or message description
Or to add brand personality.
Do not resize these icons; they should remain this size.
Illustrative icons are rendered as background-images since they contain colors and are not packaged as a font.
To render an illustrative icon, use the .icon-illustrative class with the icon class name you want to render.
Use Illustrative Icon when:
Conveying a celebratory moment or message description
Or to add brand personality.
Do not resize these icons; they should remain this size.
Note that because these icons are rendered as characters in a font, you may style them however you wish using CSS.
<span class="icon icon-arrow-up" style="color: green;"></span>
Primarily, buttons will contain only text. In the event that you would like to inject an icon into a button, the icon will be aligned to the text automatically. Note that the icon can appear on either side.
<button class="button btn-cta">Look Up <span class="icon icon-arrow-up margin-left-tiny"></span></button>
<button class="button btn-cta"><span class="icon icon-arrow-up margin-right-tiny"></span> Look Up!</button>
Icons should be separated from their associated text by 14px. To include the appropriate right padding, add the class .icon-left-text to the icon element.
Icons should not:
<span style="font-weight:200">14px font size:</span>
<p style="font-size: 14px"><span class="icon icon-sysicon-maleavatar icon-left-text"></span>John Smith</p>
<span style="font-weight:200">16px font size:</span>
<p style="font-size: 16px"><span class="icon icon-sysicon-maleavatar icon-left-text"></span>John Smith</p>
<span style="font-weight:200">20px font size:</span>
<p style="font-size: 20px"><span class="icon icon-sysicon-maleavatar icon-left-text"></span>John Smith</p>
John Smith
16px font size:John Smith
20px font size:John Smith
14px
Download
Download
Navigate
Edit
John Smith
jsmith@smithfarms.com
(555) 555-5555
123 Main St, Townton, NJ
16px
Download
Download
Navigate
Edit
John Smith
jsmith@smithfarms.com
(555) 555-5555
123 Main St, Townton, NJ
20px
Download
Download
Navigate
Edit
John Smith
jsmith@smithfarms.com
(555) 555-5555
123 Main St, Townton, NJ
Icons on the left of form fields should:
Icons on the right of form fields should:
Form fields stacked vertically should have their left icons aligned vertically centered to other icons.
To add an icon to a form, add class .icon-left or .icon-right to .md-text-field for the aligned icon you need and place the icon element as the last child within the .md-text-field container.
Additionally, icons will automatically change color along with the form field active/error/disabled colors.
<div class="row">
<div class="small-12 medium-4 columns">
<div class="md-text-field with-floating-label icon-left">
<input type="text" id="input_1" value="John Smith" required>
<label for="input_1">Name</label>
<span class="icon icon-sysicon-maleavatar"></span>
</div>
</div>
</div>
<div class="row">
<div class="small-12 medium-4 columns">
<div class="md-text-field with-floating-label icon-right">
<input type="password" id="input_2" required>
<label for="input_2">Password</label>
<span class="icon icon-sysicon-eye"></span>
</div>
</div>
</div>
<div class="row">
<div class="small-12 medium-4 columns">
<div class="md-text-field with-floating-label icon-left">
<input type="text" id="input_3" value="4567 2nd St, New York, NY" required class="has-focus">
<label for="input_3">Address</label>
<span class="icon icon-sysicon-mappin"></span>
</div>
</div>
</div>
<div class="row">
<div class="small-12 medium-4 columns">
<div class="md-text-field with-floating-label icon-left">
<input type="text" id="input_4" value="4567 2nd St, New York, NY" required class="has-error has-focus">
<label for="input_4">Address</label>
<span class="icon icon-sysicon-mappin"></span>
</div>
</div>
</div>
<div class="row">
<div class="small-12 medium-4 columns">
<div class="md-text-field with-floating-label icon-left">
<input type="text" id="input_5" value="4567 2nd St, New York, NY" required class="has-error">
<label for="input_5">Address</label>
<span class="icon icon-sysicon-mappin"></span>
</div>
</div>
</div>
<div class="row">
<div class="small-12 medium-4 columns">
<div class="md-text-field with-floating-label icon-left">
<input type="text" id="input_6" required disabled>
<label for="input_6">Address</label>
<span class="icon icon-sysicon-mappin"></span>
</div>
</div>
</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodoconsequat. Duis aute irure dolor in reprehenderit in voluptate velit essecillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat nonproident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Icons
All icons need to be used in partnership with a product designer so we can ensure consistency of use throughout the NM experience.
The icons in the UI-Toolkit are automatically generated from SVG files. These files are packaged up into a font that is then served directly to the browser via the UI-Toolkit CSS.
To render an icon, simply use the
.iconclass, along with the the class for the particular slug that you wish to render. For example, below, we render the Success icon using the.icon-successclass (.icon-util-successfor NM-CX ).