MDK by Tether

The @mdk/core package includes 70+ icons to simplify development of Bitcoin mining applications.

Prerequisites

Complete the @mdk/core installation and add the dependency

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

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 Manager
	`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

Create 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} />
  ),
})

Icons