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.
For a brand with no wordmark file, text sets the name in the heading font at the logo's size, after the icon if there is one. A link is then named by the text.
For a brand with no designed icon yet, monogram draws a favicon-style mark at the icon's height: a bare solid shape with no tile behind it, in the strongest text colour, so it is black in light mode and white in dark mode. monogram picks one of a few geometric shapes from the name, so a product always gets the same mark. A string draws those characters instead, as a heavy glyph. Beside text the mark is decorative. When the real mark exists, pass it as icon: an icon always replaces the monogram.
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.
