2.0 alpha
These docs describe 2.0. Install it with @once-ui-system/core@alpha.
On 1.8.x? Read the 1.x docs
TrademarkTrademarkDocs
Ctrl k
Search docs...
Components

Logo

Updated: July 31, 2025
View on GitHub
The Logo component is used to display brand logos with consistent styling and sizing. It supports displaying both an icon and a wordmark, either separately or together. The Logo component comes in different sizes to accommodate various use cases. Display only the icon part of the logo. Display only the wordmark part of the logo. The Logo component can function as a link when provided with an href property. The brand prop provides a copy option for allowing the icon and wordmark to be separately copied as an svg to the clipboard on right click through a context menu. The url option displays a link to your brand page when provided.
Prop
Type
Default
className
string
size
Scale of whichever parts are shown.
xllmsxs
m
style
React.CSSProperties
icon
The mark. Takes one source, or { light, dark } for a per-theme pair.
string{ light: string; dark: string; }
wordmark
The wordmark. Same shape as icon.
string{ light: string; dark: string; }
href
Makes it a link, usually home.
string
dark
Render only in the dark theme.
boolean
light
Render only in the light theme.
boolean
brand
Turns the logo into a brand menu: copy the assets as SVG, and link to a brand page.
{ copy?: boolean; url?: string }
…and every React.AnchorHTMLAttributes propinherited
Edit this page on GitHub
TrademarkTrademark
Built with curiosity by Lorant One and the Design Engineers Club