Icons

Tyler Forge provides a set of icons that can be used in your application and libraries. These icons are SVGs and can be used either directly in your HTML or more commonly via the Forge icon component. To learn more about the Forge icon component, see the icon component documentation.

Icon Library

Icons are distributed via the Tyler icons library. This library gives you access to over 8500+ icons.

You can view the full set of icons or search the icon library.

Installation

The Tyler icons library is available as as NPM package, or from the Forge CDN.

NPM Package

This is the recommended way to consume icons in your applications or libraries. You can install the package using the following command:

npm install @tylertech/tyler-icons

Usage

The icons are distributed as ES modules, so you can import them directly into your application:

import { tylIconFavorite, tylIconHeart, tylIconForgeLogo } from '@tylertech/tyler-icons';

Each icon object consists of a name and data property. The name is the name of the icon, and the data is the raw SVG string for the icon.

Each icon can then be registered for use with the <forge-icon> component using the IconRegistry:

import { IconRegistry } from '@tylertech/forge';

IconRegistry.define([tylIconFavorite, tylIconHeart, tylIconForgeLogo]);

You can then use the icon in your HTML like so:

<forge-icon name="favorite"></forge-icon>
<forge-icon name="heart"></forge-icon>
<forge-icon name="forge-logo"></forge-icon>

If you cannot statically determine the name of the icon to render at build time, you can also use the external attribute on the <forge-icon> element:

<forge-icon name="favorite" external></forge-icon>

This instructs the <forge-icon> component to fetch the icon data from the CDN at runtime. This is useful if you want to dynamically load icons based on dynamic data.

CDN

You can also access the icons directly from the CDN as .svg files. This is useful if you want to use the icons as images instead, or fetch the icons manually.

Image

<img src="https://cdn.forge.tylertech.com/v1/icons/svg/standard/cake.svg" alt="Cake icon" />

Note: make note of the “standard” part of the URL. This is the icon set that the icon belongs to. You can replace this with “extended” or “custom” to access icons from those sets.

Important: “standard”, “extended”, and “custom” are CDN URL path segments only, not npm import paths. The @tylertech/tyler-icons package exports only its root and ./tyler-icons-metadata.json, so always import icons from the package root (import { tylIconCake } from '@tylertech/tyler-icons'). Subpaths like @tylertech/tyler-icons/standard do not exist.

Fetch

You could also fetch these SVG files dynamically in your application using the fetch API. This would give you access to the <svg> data that you could then render in your HTML. In fact, this is exactly what the <forge-icon> component does under the hood.

fetch('https://cdn.forge.tylertech.com/v1/icons/svg/standard/cake.svg')
  .then(response => response.text())
  .then(svg => {
    // Render the SVG in your HTML
  });

Contribution

The icon library is hosted on GitHub and is open source. If you would like to view the source code or contribute to the library, you can find the repository here: https://github.com/tyler-technologies-oss/tyler-icons

Tyler Technologies uses the Material Design Icons as a base for the standard and extended icon sets. These icons are licensed by Google but self-hosted by Forge to ensure availability and performance. We do not modify the icons in any way, and they are distributed under the original licensing terms.

The custom icons are created by Tyler Technologies and are licensed under Apache 2.0.