Source icon

import SourceIcon from "@/components/SourceIcon";

SourceIcon takes the name of a platform or source as it appears in the data, such as "LinkedIn Ads" or "CRM", and draws its mark. A named product gets its own logo from src/assets/integrations. A category, such as "CRM" or "Web", gets a neutral Phosphor glyph, because the customer may run a tool we cannot name. Anything it does not recognise gets a plug.

LogosCopy Anchor Link

These names, in any letter case, show a vendor logo. Several spellings point at the same file, so "Google Search", "Google Search Ads" and "Google Ads" all show the Google Ads logo.

<SourceIcon name="Google Ads" size={16} />
<SourceIcon name="LinkedIn Ads" size={16} />
<SourceIcon name="HubSpot" size={16} />

GlyphsCopy Anchor Link

Categories get a Phosphor icon in --text-muted (#8E93AF). Every other name falls back to Plug.

<SourceIcon name="Web" size={16} />        {/* Globe */}
<SourceIcon name="CRM" size={16} />        {/* Database */}
<SourceIcon name="Warehouse" size={16} />  {/* Database */}
<SourceIcon name="Pipeline" size={16} />   {/* Funnel */}
<SourceIcon name="Target account list" size={16} />  {/* ListChecks */}
<SourceIcon name="Webflow" size={16} />    {/* Plug: no mapping */}

Next to its nameCopy Anchor Link

Most of the product prints the channel's name beside the icon. Leave named off there, so the name is not repeated on hover. The Home recommendation cards and the Recommendations page use 13px with 12px text.

<span className="inline-flex items-center gap-1.5 text-[12px] text-[var(--text-secondary)]">
  <SourceIcon name="LinkedIn Ads" size={13} /> LinkedIn Ads
</span>

On its ownCopy Anchor Link

When the icon stands alone, such as the channels a workflow reads from, pass named. The icon is then wrapped in a Tooltip that shows the name, and a logo gets the name as its alt.

<SourceIcon name="Google Ads" size={14} named />
<SourceIcon name="LinkedIn Ads" size={14} named />
<SourceIcon name="HubSpot" size={14} named />

SizesCopy Anchor Link

size sets the width and height in pixels. The default is 14. The product uses 12 to 18.

<SourceIcon name="HubSpot" size={12} />
<SourceIcon name="HubSpot" size={13} />
<SourceIcon name="HubSpot" />
<SourceIcon name="HubSpot" size={16} />
<SourceIcon name="HubSpot" size={18} />

PropsCopy Anchor Link

A logo is an <img> with object-contain, shrink-0 and loading="lazy". A glyph is the Phosphor icon with shrink-0 and text-[var(--text-muted)].

AccessibilityCopy Anchor Link

• Without named, a logo has alt="" and is skipped by screen readers. That is right only when the name is printed beside it.
• With named, the logo's alt is the name and the tooltip wrapper has the name as aria-label. The wrapper is not focusable, so the tooltip opens on hover only.
• A glyph has no text alternative in either case. Where "CRM" or "Web" stands alone, print the word.

Do and don'tCopy Anchor Link

• Do use SourceIcon for every platform or tool mark. Do not import a logo file directly.
• Do pass the name you would show people, such as "LinkedIn Ads", and let SourceIcon find the file.
• Don't give a category a vendor logo. "CRM" stays a database glyph, because the customer may not use Salesforce or HubSpot.
• Don't recolour a logo with className. The glyph colour can follow its context, the logos cannot.

For how logos are drawn and which ones Figma has, see Logos.

Where it is usedCopy Anchor Link