Skip to content
Toolkit by Cassino Dev

Icon Styles

Font Awesome provides icons in three different styles. Understanding these styles helps you choose the right icon for your game’s visual design.

Available Styles

Section titled “Available Styles”

Solid

Section titled “Solid”

The Solid style features filled, bold icons. This is the default and most comprehensive style.

  • Visual: Completely filled shapes
  • Font Family: 'FontAwesome' or 'Font Awesome 6 Free'
  • Best For: UI elements, buttons, indicators
  • Coverage: ~2,000 icons (most extensive)

Usage

Section titled “Usage”
import { IconText } from 'font-awesome-for-phaser';


const icon = new IconText(this, 100, 100, 'heart', 48, {
  color: '#ff0000',
  iconStyle: 'solid', // Default, can be omitted
});
this.add.existing(icon);
Section titled “Popular Solid Icons”
  • Game controls: gamepad, play, pause, stop
  • UI elements: heart, star, trophy, crown
  • Actions: arrow-up, arrow-down, circle-plus, circle-minus
  • Items: coins, gem, shield, sword
  • Status: check, xmark, exclamation, question

Regular

Section titled “Regular”

The Regular style features outlined icons with transparent centers.

  • Visual: Outlined shapes, lighter weight
  • Font Family: 'Font Awesome 6 Free'
  • Best For: Subtle UI elements, inactive states
  • Coverage: ~150 icons (subset of solid)

Usage

Section titled “Usage”
const icon = new IconText(this, 100, 100, 'heart', 48, {
  color: '#ff0000',
  iconStyle: 'regular',
});
this.add.existing(icon);

When to Use Regular

Section titled “When to Use Regular”
// Show different states using solid vs regular
class GameScene extends Phaser.Scene {
  create() {
    // Active (filled)
    const activeStar = new IconText(this, 100, 100, 'star', 40, {
      color: '#ffd700',
      iconStyle: 'solid',
    });


    // Inactive (outlined)
    const inactiveStar = new IconText(this, 150, 100, 'star', 40, {
      color: '#888888',
      iconStyle: 'regular',
    });


    this.add.existing(activeStar);
    this.add.existing(inactiveStar);
  }
}

Brands

Section titled “Brands”

The Brands style contains logos and brand icons for companies and services.

  • Visual: Official brand logos
  • Font Family: 'Font Awesome 6 Brands'
  • Best For: Social media, platform integrations
  • Coverage: ~500 brand icons

Usage

Section titled “Usage”
const icon = new IconText(this, 100, 100, 'github', 48, {
  color: '#333333',
  iconStyle: 'brands',
});
this.add.existing(icon);
Section titled “Popular Brand Icons”
  • Social Media: twitter, facebook, instagram, youtube
  • Gaming Platforms: steam, twitch, discord, playstation, xbox
  • Development: github, gitlab, npm, node-js
  • Payment: paypal, stripe, cc-visa, cc-mastercard
Section titled “Example: Social Media Links”
class MenuScene extends Phaser.Scene {
  create() {
    const socialIcons = [
      { name: 'twitter', color: '#1da1f2', x: 100 },
      { name: 'discord', color: '#5865f2', x: 160 },
      { name: 'twitch', color: '#9146ff', x: 220 },
      { name: 'youtube', color: '#ff0000', x: 280 },
    ];


    socialIcons.forEach(social => {
      const icon = new IconText(this, social.x, 550, social.name, 36, {
        color: social.color,
        iconStyle: 'brands',
      });
      icon.setInteractive({ useHandCursor: true });
      this.add.existing(icon);
    });
  }
}

Choosing the Right Style

Section titled “Choosing the Right Style”

Game UI Examples

Section titled “Game UI Examples”

Health/Status Indicators

Section titled “Health/Status Indicators”
// Use solid for active/filled states
const fullHeart = new IconText(this, 20, 20, 'heart', 32, {
  color: '#ff0000',
  iconStyle: 'solid',
});


// Use regular for empty/inactive states
const emptyHeart = new IconText(this, 60, 20, 'heart', 32, {
  color: '#666666',
  iconStyle: 'regular',
});

Rating System

Section titled “Rating System”
class RatingDisplay extends Phaser.GameObjects.Container {
  constructor(scene: Phaser.Scene, x: number, y: number, rating: number) {
    super(scene, x, y);


    for (let i = 0; i < 5; i++) {
      const star = new IconText(scene, i * 40, 0, 'star', 32, {
        color: i < rating ? '#ffd700' : '#666666',
        iconStyle: i < rating ? 'solid' : 'regular',
      });
      this.add(star);
    }


    scene.add.existing(this);
  }
}

Platform Indicators

Section titled “Platform Indicators”
// Show which platforms your game is on
const platforms = [
  { name: 'windows', color: '#0078d4' },
  { name: 'apple', color: '#000000' },
  { name: 'linux', color: '#fcc624' },
  { name: 'android', color: '#3ddc84' },
];


platforms.forEach((platform, i) => {
  const icon = new IconText(this, 100 + (i * 60), 500, platform.name, 40, {
    color: platform.color,
    iconStyle: 'brands',
  });
  this.add.existing(icon);
});

Style Comparison Table

Section titled “Style Comparison Table”
StyleVisual WeightIcon CountUse CaseExample Icons
SolidHeavy/Filled~2,000Primary UI, active statesheart, star, gamepad
RegularLight/Outlined~150Secondary UI, inactive statesheart, star, circle
BrandsVariable~500Brand logos, social mediagithub, twitter, steam

Finding Icons

Section titled “Finding Icons”

Font Awesome Website

Section titled “Font Awesome Website”

Browse all available icons at fontawesome.com/icons:

  1. Search for an icon
  2. Check which styles are available (Free vs Pro)
  3. Note the icon name (e.g., fa-heart → use 'heart')
  4. Check the style (solid/regular/brands)

Common Icon Categories

Section titled “Common Icon Categories”

Game Controls

Section titled “Game Controls”
  • gamepad, joystick, keyboard
  • play, pause, stop, forward, backward
  • volume-up, volume-down, volume-mute

Game Elements

Section titled “Game Elements”
  • trophy, crown, medal, award
  • star, heart, shield, sword
  • dice, puzzle-piece, chess

UI Elements

Section titled “UI Elements”
  • bars (menu), gear (settings), circle-info (info)
  • magnifying-glass (search), filter, sliders
  • circle-plus, circle-minus, xmark

Status & Indicators

Section titled “Status & Indicators”
  • check, xmark, exclamation, question
  • spinner, circle-notch, hourglass
  • battery-full, battery-half, battery-empty

Font Family Reference

Section titled “Font Family Reference”

When using getIconChar() directly with Phaser text, use these font families:

// Solid icons
const solidText = this.add.text(x, y, getIconChar('heart'), {
  font: "48px 'FontAwesome'",
  // or
  font: "48px 'Font Awesome 6 Free'",
});


// Regular icons
const regularText = this.add.text(x, y, getIconChar('heart'), {
  font: "48px 'Font Awesome 6 Free'",
  fontStyle: 'normal', // Important for regular
});


// Brand icons
const brandText = this.add.text(x, y, getIconChar('github'), {
  font: "48px 'Font Awesome 6 Brands'",
});

Note: When using IconText, the component handles font family selection automatically based on iconStyle.

Troubleshooting

Section titled “Troubleshooting”

Icon Not Displaying

Section titled “Icon Not Displaying”

Problem: Icon shows as a square or question mark

Solutions:

  1. Check the icon exists in that style (not all icons have all styles)
  2. Verify loadFont() completed before creating the icon
  3. Ensure correct iconStyle is specified
  4. Try a different style (e.g., solid instead of regular)

Wrong Icon Appears

Section titled “Wrong Icon Appears”

Problem: Different icon than expected

Solutions:

  1. Verify icon name spelling (case-sensitive)
  2. Check Font Awesome docs for correct icon name
  3. Some icons have similar names (e.g., circle vs circle-dot)

Best Practices

Section titled “Best Practices”
  1. Use solid for primary actions - Buttons, important UI elements
  2. Use regular for secondary states - Inactive, disabled, or subtle elements
  3. Use brands for external links - Social media, platforms, services
  4. Be consistent - Stick to one style for similar elements
  5. Consider color - Different styles may need different colors for visibility
  6. Test availability - Not all icons are in free version or all styles

Next Steps

Section titled “Next Steps”