Modus Solid

Install & Usage

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/modus-solid/fonts/modus-icons.css">
@import url("https://cdn.jsdelivr.net/npm/@trimble-oss/modus-icons@1/dist/modus-solid/fonts/modus-icons.css");

Download

Releases are published on GitHub and include icon SVGs, fonts, license, and readme.

Download latest ZIP

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.

<i class="modus-icons">lightbulb_on</i>
<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 modus-solid-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="/modus-solid-icons.svg#calendar-check"/>
</svg>
<svg class="modus-icons" width="1em" height="1em" fill="currentColor">
  <use xlink:href="/modus-solid-icons.svg#tree-structure" />
</svg>
<svg class="modus-icons" width="1em" height="1em" fill="currentColor">
  <use xlink:href="/modus-solid-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.

Trimble
<img src="/modus-solid/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:

Camera 
<!-- 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.