Using Icons in Your Invoice Templates

Most ConnectWise invoices look the same — plain text line items that clients skim past without a second glance. Icons change that. A small visual cue next to a service name makes line items instantly scannable. A stat in your invoice comments, paired with an icon, turns a wall of text into a value statement your clients actually read.

Better Invoice includes the full Phosphor Icons library — over 1,500 open-source icons in six styles. They render inline with your text, scale automatically with font size, and inherit your template’s text color.

See it in action

Service and subscription line items

Add icons to your ConnectWise product descriptions to make recurring services instantly recognizable.

In ConnectWise, you'd type: :ph-shield-check: Managed Endpoint Protection

Stats in invoice comments

Use icons in your invoice comments to highlight the metrics that reinforce the value you deliver every month.

In ConnectWise, you'd type: :ph-desktop-tower: 42 workstations monitored

Tip: You don’t have to type these stats by hand every month. Use a custom data source to pull live metrics from your RMM, PSA, or other tools — Better Invoice populates them on every invoice automatically.

Popular icons for MSPs

Here are some icons that work well for common MSP services and reporting. Browse the full library at phosphoricons.com.

Icon styles

Phosphor icons come in six styles. The style is a global setting — all icons on your invoice use the same one.

Browse all icons and preview each style at phosphoricons.com.

Enable and configure icons

• Go to Page > Markdown > Icons.

• Turn on the Icons toggle.

• In the Icon Style dropdown, choose a style. The default is Duotone.

Icons take effect the next time your invoice renders. You can preview the result by refreshing your invoice in the browser.

Add icons to product descriptions and comments

This is the most common way to use icons. Type the icon syntax directly into any ConnectWise text field that Better Invoice renders with markdown — product descriptions, time entry notes, and invoice comments.

Syntax

:ph-icon-name:

Replace icon-name with any icon name from phosphoricons.com. Use lowercase with hyphens.

Find an icon

1. Go to phosphoricons.com.

2. Search for a keyword like “shield,” “cloud,” or “check.”

3. Select an icon to see its name (e.g., shield-check).

4. In your ConnectWise field, type :ph-shield-check: where you want the icon to appear.

The icon renders inline with your text, at the same size and color as the surrounding content. If you type an icon name that doesn’t exist, the raw text passes through unchanged — nothing breaks.

Where to use it

You can use :ph-icon-name: in any field where markdown rendering is enabled:

• Product descriptions — add icons to service and subscription names
• Invoice comments — highlight stats and metrics for your clients
• Time entry notes — mark completed work, follow-ups, or status

Tips

• Be consistent. Pick one icon per service category and stick with it across all your products.
• Less is more. One or two icons per line item is plenty. An invoice full of icons is harder to read, not easier.
• Match your brand. Choose an icon style that fits your company’s look. If your brand is clean and modern, try Light or Thin. If it’s bold and confident, try Bold or Fill.

Add icons to your template layout

If you’re customizing your invoice template code, you can place icons in structural areas like section headers, footers, or labels.

Syntax

{% icon "ph-icon-name" %}

For example, to add a headset icon next to a “Support Services” section heading:

<h3>{% icon "ph-headset" %} Support Services</h3>

The {% icon %} tag resolves at render time and uses the same global icon style as markdown icons. Unlike the :ph-icon-name: syntax, the icon tag always renders regardless of the markdown icons toggle — it’s part of the template structure, not the content.

A note on emoji

Unicode emoji like ✅ and ☁️ also pass through to your invoices. However, emoji appearance varies across devices and operating systems, so the same invoice can look different on a PC, Mac, or phone. Phosphor icons render identically everywhere because they’re embedded as SVGs.