Icons
Purpose-built icons for mining applications
Icons
The @mdk/core package includes 70+ icons to simplify development of Bitcoin mining applications.
Import
// Import individual icons
import { DashboardNavIcon, HashrateStatIcon, MiningStatusIcon } from '@mdk/core'
// Import the factory function
import { createIcon } from '@mdk/core'
// Import types
import type { IconProps, CreateIconOptions } from '@mdk/core'Icon props
All icons accept the IconProps interface:
| Prop | Type | Default | Description |
|---|---|---|---|
size | number | string | 24 | Sets both width and height |
color | string | 'currentColor' | Icon color (single-color icons only) |
width | number | string | none | Override width |
height | number | string | none | Override height |
className | string | none | CSS class |
style | CSSProperties | none | Inline styles |
Basic usage
import { DashboardNavIcon, HashrateStatIcon } from '@mdk/core'
// Default size (24px)
<DashboardNavIcon />
// Custom size
<HashrateStatIcon size={32} />
// Custom color
<MiningStatusIcon color="#72F59E" />
// With className
<SettingsNavIcon className="sidebar-icon" />Available icons
Navigation icons
Icons for sidebar and navigation menus:
| Icon | Name | Description |
|---|---|---|
 | DashboardNavIcon | Dashboard/home |
 | FarmsNavIcon | Mining farms |
 | FinancialsNavIcon | Financial reports |
 | InventoryNavIcon | Equipment inventory |
 | MinersOverviewNavIcon | Miner overview |
 | OperationsNavIcon | Operations |
 | PoolManagerNavIcon | Pool management |
 | ReportingNavIcon | Reporting |
 | SettingsNavIcon | Settings |
 | UserManagementNavIcon | User management |
 | ExplorerNavIcon | Explorer |
 | AlertsNavIcon | Alerts |
 | CabinetWidgetNavIcon | Cabinet widgets |
 | ContainerWidgetsNavIcon | Container widgets |
Status icons
Icons for displaying operational status:
| Icon | Name | Description |
|---|---|---|
 | MiningStatusIcon | Active mining |
 | OfflineStatusIcon | Offline |
 | SleepStatusIcon | Sleep/standby mode |
 | ErrorStatusIcon | Error state |
 | LiveIcon | Live/active |
 | OfflineIcon | Offline indicator |
Alarm icons
Icons for alerts and alarms:
| Icon | Name | Description |
|---|---|---|
 | TemperatureAlarmIcon | Temperature alarm |
 | PressureAlarmIcon | Pressure alarm |
 | FluidAlarmIcon | Fluid/coolant alarm |
 | OfflineAlarmIcon | Offline alarm |
 | OtherAlarmIcon | Generic alarm |
 | AlertTriangleIcon | Warning triangle |
Weather icons
Icons for environmental conditions:
| Icon | Name | Description |
|---|---|---|
 | SunnyIcon | Sunny/clear |
| ⛅ | CloudyIcon | Cloudy |
 | RainyIcon | Rain |
 | SnowyIcon | Snow |
 | PartlyCloudyIcon | Partly cloudy |
 | RainThunderIcon | Thunderstorm |
Mining/stats icons
Icons for mining metrics and statistics:
| Icon | Name | Description |
|---|---|---|
 | HashrateCardIcon | Hashrate display |
 | HashrateStatIcon | Hashrate statistic |
 | MinersStatIcon | Miner count |
 | FarmStarIcon | Farm highlight |
 | FarmAlertIcon | Farm alert |
 | MinerOverviewIcon | Miner overview |
 | MinerExplorerIcon | Miner explorer |
 | PoolsIcon | Mining pools |
 | ProductionDataIcon | Production data |
Measurement icons
Icons for measurements and readings:
| Icon | Name | Description |
|---|---|---|
 | PowerIcon | Power consumption |
 | FanIcon | Fan/cooling |
 | FrequencyIcon | Frequency |
 | EfficiencyIcon | Efficiency |
 | ConsumptionIcon | Consumption |
 | TemperatureCelsiusIcon | Temperature (°C) |
 | TemperatureIndicatorIcon | Temperature indicator |
 | TemperatureWeatherIcon | Temperature/weather |
 | CoolingDropIcon | Cooling/liquid |
UI icons
General UI icons:
| Icon | Name | Description |
|---|---|---|
 | ArrowIcon | Arrow (direction) |
 | RightArrowIcon | Right arrow |
 | RightNavigateIcon | Navigate right |
 | PinIcon | Pin/favorite |
 | UnPinIcon | Unpin |
 | MenuIcon | Menu hamburger |
 | ExportIcon | Export data |
 | GoogleIcon | Google logo |
 | NotificationBellIcon | Notifications |
 | SettingsHeaderIcon | Settings gear |
 | SignOutIcon | Sign out |
 | UserAvatarIcon | User avatar |
 | VolumeOnIcon | Volume on |
 | VolumeOffIcon | Volume off |
 | CommentIcon | Comment |
 | IncreaseIcon | Increase/up |
 | DecreaseIcon | Decrease/down |
 | ProfitArrowIcon | Profit indicator |
 | BtcCardIcon | Bitcoin card |
 | ModeIcon | Mode toggle |
 | ScaleControlIcon | Scale control |
 | SiteOverviewIcon | Site overview |
 | ActionsTickIcon | Action complete |
Creating custom icons
Use createIcon to create custom icons following the same pattern:
import { createIcon } from '@mdk/core'
export const MyCustomIcon = createIcon({
displayName: 'MyCustomIcon',
viewBox: '0 0 24 24',
defaultWidth: 24,
defaultHeight: 24,
path: (
<path
d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"
stroke="currentColor"
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
/>
),
})CreateIconOptions
| Option | Type | Default | Description |
|---|---|---|---|
displayName | string | none | Required: Component display name |
viewBox | string | none | Required: SVG viewBox |
defaultWidth | number | 24 | Default width |
defaultHeight | number | 24 | Default height |
multiColor | boolean | false | Multi-color icon flag |
path | ReactNode | function | none | Required: SVG path content |
Dynamic color icons
For icons that need dynamic colors:
export const DynamicColorIcon = createIcon({
displayName: 'DynamicColorIcon',
viewBox: '0 0 24 24',
path: ({ color }) => (
<circle cx="12" cy="12" r="10" fill={color} />
),
})