Logos

v2.1.2

Documentation Under Review

Installation

Install the Logos component from the Catalyst component library:

npm install @pmi/catalyst-logos

Overview

The Logos package provides official PMI, PM.com, and Infinity brand logos in different orientations and colors, each optimized for the web. Each logo component is built on top of the BaseIcon component from @pmi/catalyst-icons, ensuring consistent sizing and rendering across all applications.

Gallery

Below showcases all available logo assets included within the package. To download official assets please navigate to the company's Frontify instance.

API Reference

All logo components accept the same props as BaseIcon from @pmi/catalyst-icons:

Brand Guidelines

Logo Selection

Choose the appropriate logo variant based on context:

• Horizontal: Best for headers, wide layouts, landscape orientations
• Vertical: Best for sidebars, tall layouts, portrait orientations
• Mark Only: Best for sidebars, mobile, app icons
• PM.com: Use for PM.com brand-specific communications and properties

Color Usage

• Color: Default for light mode interfaces
• Color - Inverse: Use in dark mode. Pair with the standard color variant — if light mode uses color, dark mode uses color inverse.
• Black: Use in light interfaces to draw less emphasis to the logo
• White: Use in dark interfaces to draw less emphasis to the logo
• PM.com: Use for PM.com brand properties and communications
• Infinity: Use for Infinity brand-specific communications

Size and Spacing

• Minimum Size: Ensure logos are never smaller than 24px height for digital
• Clear Space: Maintain clear space around logos equal to the height of the "P" in PMI
• Aspect Ratio: Always maintain original aspect ratio (use size="full")
• Container: Wrap logos in appropriately sized containers

Accessibility

All logo components have aria-hidden="true" by default since they're typically decorative. When logos are interactive, provide descriptive labels:

// ✅ Good: Clickable logo with aria-label
<a href="/" aria-label="PMI Homepage">
  <PMIHorizontalColor size="full" color="original" className="w-48 h-24" />
</a>

// ✅ Good: Responsive logo with consistent label
<a href="/" aria-label="PMI Homepage">
  <PMIHorizontalColor className="hidden md:block w-48 h-24" size="full" color="original" />
  <PMIMarkOnlyColor className="md:hidden w-12 h-12" size="full" color="original" />
</a>

// ❌ Avoid: Logo as sole navigation without label
<a href="/">
  <PMIHorizontalColor size="full" color="original" />
</a>

Logo components support data-testid for integration testing.

Technical Details

Component Generation

Logo components are auto-generated from SVG assets. Do not modify logo component files directly. Any changes should be made in the build script at ~/process-packages-assets.cjs.

Bundle Optimization

Each logo component is exported individually, enabling tree-shaking. Import only the logos you need to minimize bundle size:

// ✅ Optimal: Tree-shakeable imports
import { PMIHorizontalColor, PMComHorizontalColor } from '@pmi/catalyst-logos';

// ⚠️ Avoid: Wildcard imports prevent tree-shaking
import * as Logos from '@pmi/catalyst-logos';

SVG Rendering

Logos use react-inlinesvg for SVG rendering, which:

• Preserves embedded brand colors
• Ensures unique IDs for multiple instances
• Maintains crisp rendering at all sizes
• Supports CSS custom properties for theming

Related

• Icons - Base icon component system that logos extend
• Flags - Country and territory flag assets
• PMI Brand Guidelines - (internal)