Trimble MXP Icons

A standalone React icon component library for Trimble projects, featuring three comprehensive icon sets:

• MXP Icons (250 icons) - Trimble MXP design system icons
• T2 Icons (93 icons) - Terra icon set
• T2U Icons (23 icons) - Terra UI icon set

Installation

npm install @trimble-creative-strategy/trimble-mxp-icons

Usage

Import the Icon component and the styles in your React/Next.js application:

import { Icon } from '@trimble-creative-strategy/trimble-mxp-icons';
import '@trimble-creative-strategy/trimble-mxp-icons/styles';

function App() {
  return (
    <div>
      <Icon type="mxp-icon-3d-modeling-desktop" size={24} />
      <Icon type="t2u-search" size={16} fillColor="#0063a3" />
      <Icon type="t2-icon--arrow-down" size={20} rotateDeg="90" />
    </div>
  );
}

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | type | string | required | Icon identifier (e.g., "mxp-icon-3d-modeling-desktop", "t2u-search") | | size | number | 16 | Icon size in pixels | | className | string | "" | Additional CSS classes | | rotateDeg | "0" \| "90" \| "180" \| "270" | "0" | Icon rotation | | fillColor | string | "currentColor" | SVG fill color | | label | string | auto-generated | Accessibility label |

Icon Sets

MXP Icons

Prefix: mxp-icon-*

Examples:

• mxp-icon-2d-drawings
• mxp-icon-3d-modeling-desktop
• mxp-icon-calendar
• mxp-icon-cloud-management

T2 Icons

Prefix: t2-icon--*

Examples:

• t2-icon--arrow-down
• t2-icon--check
• t2-icon--close

T2U Icons

Prefix: t2u-*

Examples:

• t2u-search
• t2u-check
• t2u-download
• t2u-mail

Features

• ✅ Tree-shakeable - icons load on-demand
• ✅ TypeScript support with full type definitions
• ✅ Accessible with ARIA labels
• ✅ Customizable size and colors
• ✅ Rotation support
• ✅ Works with React 18+ and React 19+
• ✅ Next.js compatible

TypeScript

The package includes TypeScript definitions. Import the types:

import { Icon, IconProps } from '@trimble-creative-strategy/trimble-mxp-icons';

License

MIT © Trimble