Install
Modus Icons are published to npm, but they can also be manually downloaded if needed.
Package manager
Install Modus Icons — including SVG files, SVG
sprites, and icon fonts — with npm. Then, choose how you’d like to include the icons with the usage
instructions.
npm i @trimble-oss/modus-icons
CDN
Include the icon fonts stylesheet—in your website <head> or via @import in
CSS—from our CDN and get started in seconds. See icon font docs for examples.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@trimble-oss/modus-icons@1/dist/transportation/fonts/modus-icons.css">
@import url("https://cdn.jsdelivr.net/npm/@trimble-oss/modus-icons@1/dist/transportation/fonts/modus-icons.css");
Usage
Modus Icons are SVG files, SVG sprites, and icon fonts, so you can include them into your HTML in a few ways depending on how your project is
setup. For SVGs and SVG sprites we recommend using a width: 1em (and optionally height: 1em) for easy resizing via
font-size.
Icon font
Use in web applications, on buttons, and anywhere you need more than a few icons.
Icon fonts including every icon are also included for Modus Icons. Include the icon web fonts in your
page via CSS, then reference the ligature names as needed in your HTML (e.g.,
<i class="modus-icons">lightbulb_on</i>).
Use font-size and color to change the icon appearance.
lightbulb_on
<i class="modus-icons">lightbulb_on</i>
lightbulb_on
trimble_logo
<i class="modus-icons" style="font-size: 2rem; color: orange;">lightbulb_on</i>
<i class="modus-icons" style="font-size: 2rem">trimble-logo</i>
SVG Sprite
Use for static sites when you only need a few icons.
Copy the transportation-icons.svg SVG sprite file to your directory of choice.
Insert any icon with the <use> element. Use the icon’s filename
as the fragment identifier (e.g., toggles is #toggles). SVG sprites allow you to
reference an external file similar to an <img> element, but with the power of
currentColor for easy theming.
Heads up! There’s an issue with Chrome where <use> doesn’t work
across domains.
<svg class="modus-icons" width="1em" height="1em" fill="currentColor">
<use xlink:href="/transportation-icons.svg#calendar-check"/>
</svg>
<svg class="modus-icons" width="1em" height="1em" fill="currentColor">
<use xlink:href="/transportation-icons.svg#tree-structure" />
</svg>
<svg class="modus-icons" width="1em" height="1em" fill="currentColor">
<use xlink:href="/transportation-icons.svg#check-circle" />
</svg>
External SVG image
Use for static sites when you only need a few icons.
Copy the Modus Icons SVGs to your directory of choice and reference them like normal images with the
<img> element.
<img src="/transportation/svg/trimble-logo.svg" alt="Trimble" width="32" height="32">
Embedded SVG code
Use when you don't want any dependency.
Embed your icons within the HTML of your page (as opposed to an external image file). Here we’ve used a
custom width and height.
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="modus-icons-calendar-check" viewBox="0 0 24 24">
<path d="M10.81 15.22a.984.984 0 0 0 0 1.4l2.09 2.09c.39.39 1.02.39 1.41 0l4.42-4.41a.984.984 0 0 0 0-1.4.984.984 0 0 0-1.4 0l-3.72 3.72-1.4-1.4a.984.984 0 0 0-1.4 0ZM13.5 11h-3v3h3v-3ZM9 16H6v3h3v-3ZM20 3h-2c0-.55-.45-1-1-1s-1 .45-1 1H8c0-.55-.45-1-1-1s-1 .45-1 1H4c-1.1 0-2 .9-2 2v15c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2Zm0 17H4V9.97h16V20Zm0-12.03H4V5h2v1c0 .55.45 1 1 1s1-.45 1-1V5h8v1c0 .55.45 1 1 1s1-.45 1-1V5h2v2.97ZM9 11H6v3h3v-3Z"/>
</svg>
CSS
Use when you don't want any dependency.
You can also use the SVG within your CSS (be sure to escape any characters, such as
# to %23 when specifying hex color values). When no dimensions are specified via
width and height on the <svg>, the icon will fill the available
space.
The viewBox attribute is required if you wish to resize icons with background-size.
Note that the xmlns attribute is required.
.modus-icons::before {
display: inline-block;
content: "";
vertical-align: -.125em;
background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='%23333' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z' clip-rule='evenodd'/></svg>");
background-repeat: no-repeat;
background-size: 1rem 1rem;
}
Styling
Color can be changed by setting a .text-* class or custom CSS:
<svg class="text-danger" width="24" height="24" fill="currentColor" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
...
</svg>
Accessibility
For purely decorative icons, add aria-hidden="true". Otherwise, provide an appropriate
text alternative. Depending on which method you’re using to add the icons, and where you’re using them
(e.g. as standalone images, or as the only content of a button or similar control), there are various possible
approaches. Here are a few examples:
<!-- alt="..." on <img> element -->
<img src="/assets/img/camera.svg" alt="Camera" ...>
<svg class="modus-icons" ... role="img" aria-label="Tools">
<use xlink:href="modus-icons.svg#tools"/>
</svg>
<!-- aria-label="..." on the control -->
<button ... aria-label="Mute">
<svg class="modus-icons" aria-hidden="true" ...>
...
</svg>
</button>
Working with SVGs
SVGs are awesome to work with, but they do have some known quirks to work around. Given the numerous ways in
which SVGs can be used, we haven’t included these attributes and workarounds in our code.
Known issues include:
-
When using SVGs with <img> elements, screen readers may not announce them as
images, or skip the image completely. Include an additional role="img" on
the <img> element to avoid any issues. See this article for
details.
-
External SVG sprites may not function correctly in Internet Explorer. Use the svg4everybody
polyfill as needed.
Found another issue with SVGs we should note? Please open an
issue to share details.