0
# Brand Components
1

2
Brand identity components for consistent visual representation across Mantine properties, including the official logo and related brand assets.
3

4
## Capabilities
5

6
### MantineLogo
7

8
The official Mantine logo component with configurable display modes and styling options.
9

10
```typescript { .api }
11
/**
12
 * Official Mantine logo component supporting full logo with text or mark-only display
13
 * @param type - Display type: 'full' shows logo with text, 'mark' shows only the icon
14
 * @param size - Logo size in pixels or CSS units
15
 * @param color - Logo color override
16
 */
17
interface MantineLogoProps extends LogoProps {
18
  type?: 'mark' | 'full';
19
}
20

21
function MantineLogo(props: MantineLogoProps): JSX.Element;
22
```
23

24
**Usage Examples:**
25

26
```typescript
27
import { MantineLogo } from "@mantine/ds";
28

29
// Full logo with text (default)
30
function Header() {
31
  return <MantineLogo size={120} />;
32
}
33

34
// Icon/mark only
35
function Favicon() {
36
  return <MantineLogo type="mark" size={32} />;
37
}
38

39
// Custom styling
40
function BrandedHeader() {
41
  return (
42
    <MantineLogo 
43
      type="full" 
44
      size={100}
45
      color="blue"
46
      variant="mantine.dev"
47
    />
48
  );
49
}
50

51
// Inverted colors for dark backgrounds
52
function DarkHeader() {
53
  return (
54
    <MantineLogo 
55
      type="full" 
56
      size={120}
57
      inverted
58
    />
59
  );
60
}
61
```
62

63
## Types
64

65
```typescript { .api }
66
interface LogoProps extends React.ComponentPropsWithoutRef<'svg'> {
67
  /** Mantine color or CSS color value */
68
  color?: string;
69
  /** Logo variant for different Mantine sites */
70
  variant?: 'mantine.dev' | 'ui.mantine.dev';
71
  /** Logo size in pixels or CSS units */
72
  size?: number | string;
73
  /** Whether to use inverted colors */
74
  inverted?: boolean;
75
}
76
```