Hover over logos to see the broker color variant
Chase, JPM, Wells Fargo, and Fidelity Alt - hover to see broker colors
Compare default (nav) vs hover surface variant with status indicators
30% opacity, no hover effects
Soft variant transitions to broker color variant on hover
Soft variant transitions to greybrand variant on hover
Static soft variant
// Basic usage
<BrokerLogo broker="rh" />
// Different sizes
<BrokerLogo broker="coin" size="3xs" /> // 20px
<BrokerLogo broker="coin" size="2xs" /> // 24px
<BrokerLogo broker="coin" size="xs" /> // 28px
<BrokerLogo broker="coin" size="3xl" /> // 80px
// Different variants
<BrokerLogo broker="schwab" variant="brokercolor" />
<BrokerLogo broker="schwab" variant="invrs" />
// Disabled state
<BrokerLogoDisabled broker="td" />
// Custom hover behavior
<BrokerLogo broker="fido" hoverVariant="greybrand" />
<BrokerLogo broker="fido" showHover={false} />Broker logos automatically show their brand colors on hover
Visual test to verify status icon positioning for each size
Hover over any broker icon to see the tooltip with full account details
Description always visible
Hover to reveal description
Description never shown
Single-line descriptions are vertically centered in horizontal layouts
Pure CSS hover states - hovering anywhere on the broker-status triggers both logo and description transitions
When using above/below positions, descriptions are absolutely positioned and don't affect the grid layout. Descriptions are left-aligned with the broker icon edge. No gaps between components to prevent hover flicker.
Compare default (nav) vs hover surface variant