0
# Icon Library
1

2
Brand-specific icons for platforms, technologies, and social media with consistent styling and sizing options.
3

4
## Capabilities
5

6
### DiscordIcon
7

8
Discord brand icon with customizable size and styling.
9

10
```typescript { .api }
11
/**
12
 * Discord brand icon component
13
 * @param size - Icon size in pixels or CSS units
14
 * @param style - Additional CSS styles
15
 */
16
interface IconProps extends React.ComponentPropsWithoutRef<'svg'> {
17
  size?: number | string;
18
  style?: React.CSSProperties;
19
}
20

21
function DiscordIcon(props: IconProps): JSX.Element;
22
```
23

24
### TwitterIcon  
25

26
Twitter/X brand icon with customizable size and styling.
27

28
```typescript { .api }
29
/**
30
 * Twitter/X brand icon component
31
 * @param size - Icon size in pixels or CSS units
32
 * @param style - Additional CSS styles
33
 */
34
function TwitterIcon(props: IconProps): JSX.Element;
35
```
36

37
### GithubIcon
38

39
GitHub brand icon with customizable size and styling.
40

41
```typescript { .api }
42
/**
43
 * GitHub brand icon component
44
 * @param size - Icon size in pixels or CSS units
45
 * @param style - Additional CSS styles
46
 */
47
function GithubIcon(props: IconProps): JSX.Element;
48
```
49

50
### NpmIcon
51

52
NPM package manager icon with customizable size and styling.
53

54
```typescript { .api }
55
/**
56
 * NPM package manager icon component
57
 * @param size - Icon size in pixels or CSS units
58
 * @param style - Additional CSS styles
59
 */
60
function NpmIcon(props: IconProps): JSX.Element;
61
```
62

63
### YarnIcon
64

65
Yarn package manager icon with customizable size and styling.
66

67
```typescript { .api }
68
/**
69
 * Yarn package manager icon component
70
 * @param size - Icon size in pixels or CSS units
71
 * @param style - Additional CSS styles
72
 */
73
function YarnIcon(props: IconProps): JSX.Element;
74
```
75

76
### TypeScriptIcon
77

78
TypeScript technology icon with customizable size and styling.
79

80
```typescript { .api }
81
/**
82
 * TypeScript technology icon component
83
 * @param size - Icon size in pixels or CSS units
84
 * @param style - Additional CSS styles
85
 */
86
function TypeScriptIcon(props: IconProps): JSX.Element;
87
```
88

89
### TypeScriptCircleIcon
90

91
TypeScript technology icon with circular background.
92

93
```typescript { .api }
94
/**
95
 * TypeScript icon with circular background
96
 * @param size - Icon size in pixels or CSS units
97
 * @param style - Additional CSS styles
98
 */
99
function TypeScriptCircleIcon(props: IconProps): JSX.Element;
100
```
101

102
### CssIcon
103

104
CSS technology icon with customizable size and styling.
105

106
```typescript { .api }
107
/**
108
 * CSS technology icon component
109
 * @param size - Icon size in pixels or CSS units
110
 * @param style - Additional CSS styles
111
 */
112
function CssIcon(props: IconProps): JSX.Element;
113
```
114

115
**Usage Examples:**
116

117
```typescript
118
import { 
119
  DiscordIcon, 
120
  TwitterIcon, 
121
  GithubIcon, 
122
  TypeScriptIcon,
123
  TypeScriptCircleIcon,
124
  NpmIcon,
125
  YarnIcon,
126
  CssIcon
127
} from "@mantine/ds";
128

129
// Social media icons
130
function SocialLinks() {
131
  return (
132
    <div>
133
      <DiscordIcon size={24} />
134
      <TwitterIcon size={24} />
135
      <GithubIcon size={24} />
136
    </div>
137
  );
138
}
139

140
// Technology stack display
141
function TechStack() {
142
  return (
143
    <div className="tech-icons">
144
      <TypeScriptIcon size={32} />
145
      <CssIcon size={32} />
146
    </div>
147
  );
148
}
149

150
// Package manager options
151
function InstallInstructions() {
152
  return (
153
    <div>
154
      <div>
155
        <NpmIcon size={20} />
156
        <code>npm install @mantine/core</code>
157
      </div>
158
      <div>
159
        <YarnIcon size={20} />
160
        <code>yarn add @mantine/core</code>
161
      </div>
162
    </div>
163
  );
164
}
165

166
// Custom styling
167
function CustomIcon() {
168
  return (
169
    <GithubIcon 
170
      size={40}
171
      style={{ 
172
        color: '#333',
173
        cursor: 'pointer'
174
      }}
175
      onClick={() => window.open('https://github.com/mantinedev/mantine')}
176
    />
177
  );
178
}
179
```
180

181
## Types
182

183
```typescript { .api }
184
interface IconProps extends React.ComponentPropsWithoutRef<'svg'> {
185
  /** Icon size in pixels or CSS units (defaults to 16) */
186
  size?: number | string;
187
  /** Additional CSS styles */
188
  style?: React.CSSProperties;
189
  /** Click handler */
190
  onClick?: (event: React.MouseEvent<SVGElement>) => void;
191
  /** CSS class name */
192
  className?: string;
193
}
194
```