sprõut
ComponentsData display

Brand Icon

Logos for the apps and models your product connects to. Draw a bare glyph in text, a framed tile in lists, or a stack of tiles with names on hover.

Google Calendar · md

Usage

Brand icon usageTSX
import {
  BrandIcon, BrandStack, BrandTile, brandNames,
} from "@tulipfarm/sprout/brand-icon";

<BrandIcon brand="slack" size="sm" />
<BrandIcon brand="google-calendar" size="inline" />
<BrandStack brands={[{ brand: "gmail", name: brandNames.gmail }]} />

BrandIcon takes a brand and a size."inline" (16px), "glyph" (20px), and "fill" draw only the logo. "sm" (24px), "md" (36px, default),"lg" (48px), and "xl" (56px) put it in a tile. Near-black logos such as GitHub, Notion, and OpenAI follow the text color, so they stay visible in dark mode. Logos are decorative; put the app name in nearby text.

Sizes
  • inline
  • glyph
    Q3 board deck
  • fill
  • sm
    GitHubFiles issues for the product team
  • md
    NotionSearch pages and databases
  • lg
    LinearComing soon
  • xl
    HubSpotBy HubSpot, Inc.
Brand catalog · 33 brands
  • Claude
  • OpenAI
  • DeepSeek
  • Grok
  • Kimi
  • Google Workspace
  • Gmail
  • Google Calendar
  • Google Drive
  • Google Sheets
  • Google Docs
  • Google Slides
  • Google Forms
  • Slack
  • GitHub
  • Jira
  • Confluence
  • Trello
  • Notion
  • HubSpot
  • Figma
  • Microsoft
  • Linear
  • Stripe
  • Airtable
  • Asana
  • ClickUp
  • Discord
  • Shopify
  • Zendesk
  • Dropbox
  • GitLab
  • Calendly

Inline and glyph

Use "inline" next to 14px text: buttons, menu options, tool activity, and notes. Use "glyph" for 20px slots: file rows, chips, workflow steps, and prompt banners.

Calendar events
  • Design review10:00 – 10:45 · Meet link
  • Quarterly planning with the leadership team13:00 – 15:00 · No call link
  • Focus timeAll day · Private
Model picker
  • Claude Sonnet 4.5Default
  • GPT-5Analytics team
  • DeepSeek V3Off
  • Grok 4Off
  • Kimi K2Off
  • Gemini 2.5 ProEngineering
Tool activity
  • Read the Pipeline sheet
  • Searched the inbox for invoices
  • Posted in #support
  • Opened issue #482
  • Read the Onboarding page
  • Searched the Support board
  • Updated the Leads table
Agent channels and Drive files

Linked workspace members can talk to this agent in these channels.

Live from Google Drive · [email protected]

Google WorkspaceSlackGitHub

File mentions
  • Customer onboarding playbook
  • FY26 pipeline forecast
  • Q3 board deck
  • Event RSVP form
  • Signed MSA – Northwind.pdf
Workflow steps
  1. When a new invoice email arrives
  2. Add a row to Accounts payable
  3. Post a summary in #finance
Integration highlights
Drafted 3 follow-upsAnswered in #supportTriaged 5 new issues
  • Which bugs are blocking the 4.2 release?
  • Summarize what the Support team closed this week
Drive recovery
Google Drive needs to reconnectFiles you mentioned stay in this chat. Reconnect to read them again.

Tiles

Brand tileTSX
<BrandTile>{icon}</BrandTile>

<BrandTile
  size="action"
  render={<Button variant="ghost" size="icon" />}
  aria-label="Gmail actions"
>
  <BrandIcon brand="gmail" size="fill" />
</BrandTile>

BrandTile is the frame on its own. Put any icon in it. Itssize is "sm", "md", "lg", "xl", or "action". An action tile is 36px and grows to 44px on touch screens. Use render to make the tile a button, link, or popover trigger, then fill it with size="fill".

Connected apps · sm
  • SlackAgents reply in #sales and #supportConnected
  • GmailReads new mail for heartbeat answersConnected
  • Google CalendarBooks meetings after your approvalConnected
  • JiraSearches the Support boardNeeds attention
  • DeepSeekNot available to any teamOff
Knowledge sources · sm
  • northwind/storefront-and-checkout-monorepoIssues, Pull requests · activity after 2026-01-01 UTCSynced
  • #customer-escalationsMessages and threads · 3 selected membersSyncing
  • Support handbook12 pages · 1 failedNeeds attention
  • Invoices labelMail after 2026-03-01Synced
Integrations directory · md
  • Google WorkspaceGmail, Calendar, Drive, Docs, and Sheets
  • SlackLet agents answer in channels you choose
  • MicrosoftOutlook, Teams, and OneDrive
Integration sheet · sm header, xl hero
GitHub
Google DriveConnected as [email protected]
Result cards · action tiles
Chase unpaid invoicesWorkflow · Running
Webhook syncAction · Waiting for a connection
Weekly pipeline reportActivity · Disabled while the workspace refreshes
Team offsite agendaCalendar · Ready

Brand stack

Brand stackTSX
<BrandStack
  brands={[
    { brand: "slack", name: "Slack" },
    { brand: "jira", name: "Atlassian" },
  ]}
  label="Apps this agent uses"
/>

BrandStack overlaps small tiles. Each tile shows its name on hover. The stack is one image; its name is label, or the item names joined with commas. An empty list renders nothing. Set --sprout-brand-ring to the color behind the stack.

Prompt list
Agent draft
Team
Customer Success
Actions
Read emailPost messagesSearch issues
Empty
No actions selected.
Labelled

Brand names

brandNames maps every brand to its display name. Use it for labels so names match the logos.

brandNames
  • google.gmail.searchUsed Gmail
  • github.issues.createUsed GitHub
  • atlassian.jira.searchUsed Atlassian
  • web.fetchUsed Connected apps

Popovers, cards, badges, and prompt rows above are sample code. The package draws the logos, tiles, and stacks. Your application owns data and actions.

Accessibility

BrandIcon and BrandTile are hidden from screen readers unless you give them a role and label. When a tile is a button, give it anaria-label. BrandStack is announced as one image with every app name, so its hover tooltips are not needed to understand it. Tooltips fade in over 120ms; reduced motion turns this off.