IconText Component

The IconText component is a convenience wrapper around Phaser’s text system, specifically designed for Font Awesome icons. It extends Phaser.GameObjects.Text, so you get all the power of Phaser text objects with automatic Font Awesome configuration.

Constructor

new IconText(
  scene: Phaser.Scene,
  x: number,
  y: number,
  iconName: string,
  size: number,
  options?: IconTextOptions
)

Parameters

Parameter	Type	Description
`scene`	`Phaser.Scene`	The scene this icon belongs to
`x`	`number`	X coordinate position
`y`	`number`	Y coordinate position
`iconName`	`string`	Font Awesome icon name (e.g., ‘heart’, ‘star’, ‘gamepad’)
`size`	`number`	Icon size in pixels
`options`	`IconTextOptions`	Optional configuration object

Options

interface IconTextOptions {
  color?: string;        // Hex color string (e.g., '#ff0000')
  iconStyle?: 'solid' | 'regular' | 'brands';  // Icon style
}

Basic Examples

Simple Icon

import { IconText } from 'font-awesome-for-phaser';

class GameScene extends Phaser.Scene {
  create() {
    const icon = new IconText(this, 100, 100, 'star', 48, {
      color: '#ffff00',
      iconStyle: 'solid',
    });
    this.add.existing(icon);
  }
}

Multiple Icons

create() {
  // Health indicator
  const healthIcon = new IconText(this, 50, 30, 'heart', 32, {
    color: '#ff0000',
  });

  // Score/coins indicator
  const coinIcon = new IconText(this, 150, 30, 'coins', 32, {
    color: '#ffd700',
  });

  // Shield/defense indicator
  const shieldIcon = new IconText(this, 250, 30, 'shield', 32, {
    color: '#4169e1',
  });

  this.add.existing(healthIcon);
  this.add.existing(coinIcon);
  this.add.existing(shieldIcon);
}

Advanced Usage

Centering Icons

Since IconText extends Phaser.GameObjects.Text, you can use all text methods:

const icon = new IconText(this, 400, 300, 'trophy', 64, {
  color: '#ffd700',
});

// Center the icon on its position
icon.setOrigin(0.5);

this.add.existing(icon);

Interactive Icons (Buttons)

Create clickable icons for your game UI:

const playButton = new IconText(this, 400, 300, 'play-circle', 80, {
  color: '#00ff00',
});

playButton.setInteractive({ useHandCursor: true });

playButton.on('pointerover', () => {
  playButton.setTint(0x00aa00); // Darken on hover
});

playButton.on('pointerout', () => {
  playButton.clearTint(); // Remove tint
});

playButton.on('pointerdown', () => {
  this.scene.start('GameScene');
});

this.add.existing(playButton);

Animated Icons

Add animations using Phaser’s tween system:

const loadingIcon = new IconText(this, 400, 300, 'spinner', 64, {
  color: '#0066cc',
});
loadingIcon.setOrigin(0.5);
this.add.existing(loadingIcon);

// Rotate continuously
this.tweens.add({
  targets: loadingIcon,
  angle: 360,
  duration: 1000,
  repeat: -1,
});

Pulsing Effect

const notificationIcon = new IconText(this, 700, 50, 'bell', 32, {
  color: '#ff6600',
});
this.add.existing(notificationIcon);

this.tweens.add({
  targets: notificationIcon,
  scale: { from: 1, to: 1.3 },
  alpha: { from: 1, to: 0.7 },
  duration: 500,
  yoyo: true,
  repeat: -1,
});

Common UI Patterns

class MenuScene extends Phaser.Scene {
  create() {
    const menuItems = [
      { icon: 'play', label: 'Play', y: 200 },
      { icon: 'gear', label: 'Settings', y: 280 },
      { icon: 'trophy', label: 'Achievements', y: 360 },
      { icon: 'door-open', label: 'Exit', y: 440 },
    ];

    menuItems.forEach(item => {
      const icon = new IconText(this, 350, item.y, item.icon, 32, {
        color: '#ffffff',
      });
      icon.setInteractive({ useHandCursor: true });
      this.add.existing(icon);

      const text = this.add.text(400, item.y, item.label, {
        fontSize: '24px',
        color: '#ffffff',
      });
      text.setOrigin(0, 0.5);
    });
  }
}

Power-up Icons

class GameScene extends Phaser.Scene {
  showPowerup(x: number, y: number, type: string) {
    const iconMap = {
      speed: 'bolt',
      shield: 'shield-halved',
      health: 'heart-pulse',
      star: 'star',
    };

    const powerup = new IconText(this, x, y, iconMap[type], 40, {
      color: '#ffff00',
    });
    powerup.setOrigin(0.5);
    this.add.existing(powerup);

    // Animate pickup
    this.tweens.add({
      targets: powerup,
      y: y - 50,
      alpha: 0,
      duration: 1000,
      onComplete: () => powerup.destroy(),
    });
  }
}

Status Indicators

class HUD extends Phaser.Scene {
  private healthIcon!: IconText;
  private manaIcon!: IconText;

  create() {
    // Health indicator
    this.healthIcon = new IconText(this, 20, 20, 'heart', 28, {
      color: '#ff0000',
    });
    this.add.existing(this.healthIcon);

    // Mana indicator
    this.manaIcon = new IconText(this, 20, 60, 'droplet', 28, {
      color: '#0066ff',
    });
    this.add.existing(this.manaIcon);
  }

  updateHealth(percentage: number) {
    // Change color based on health
    if (percentage > 50) {
      this.healthIcon.setColor('#00ff00');
    } else if (percentage > 25) {
      this.healthIcon.setColor('#ffaa00');
    } else {
      this.healthIcon.setColor('#ff0000');
    }
  }
}

Working with Different Icon Styles

Solid Style (Default)

const solidIcon = new IconText(this, 100, 100, 'star', 48, {
  color: '#ffff00',
  iconStyle: 'solid', // This is the default
});
this.add.existing(solidIcon);

Regular Style

const regularIcon = new IconText(this, 200, 100, 'star', 48, {
  color: '#ffff00',
  iconStyle: 'regular', // Outlined version
});
this.add.existing(regularIcon);

Brands Style

For brand/logo icons like social media:

const githubIcon = new IconText(this, 100, 200, 'github', 48, {
  color: '#333333',
  iconStyle: 'brands',
});
this.add.existing(githubIcon);

const twitterIcon = new IconText(this, 200, 200, 'twitter', 48, {
  color: '#1da1f2',
  iconStyle: 'brands',
});
this.add.existing(twitterIcon);

Tips and Best Practices

Always add to scene - Don’t forget this.add.existing(icon) after creating an icon
Use setOrigin for alignment - setOrigin(0.5) centers the icon on its coordinates
Check icon availability - Not all icons are available in all styles
Consider performance - For many icons, consider using a sprite sheet instead
Use consistent sizing - Keep UI icons at similar sizes for visual harmony
Cache for reuse - If creating many identical icons, consider creating a factory method

Next Steps

Explore Icon Styles reference
Learn about Self-Hosted Fonts
Check the complete API Reference