<SpacedGroup direction="vertical">
    <SpacedGroup xs={2} center>
      <FormControlLabel
        label="Not Checked"
        control={
          <IconSwitch
            checkedIcon={<CheckIcon color={palette.gunmetal} />}
            uncheckedIcon={<CloseIcon />}
          />
        }
      />
    
    <SpacedGroup xs={2} center>
      <FormControlLabel
        label="Checked"
        control={
          <IconSwitch
            checkedIcon={<CheckIcon color={palette.gunmetal} />}
            uncheckedIcon={<CloseIcon />}
            checked
          />
        }
      />
    </SpacedGroup>
    <SpacedGroup xs={2} center>
      <FormControlLabel
        label="Disabled"
        control={
          <IconSwitch
            checkedIcon={<CheckIcon color={palette.gunmetal} />}
            uncheckedIcon={<CloseIcon />}
            disabled
          />
        }
      />
    </SpacedGroup>
  </SpacedGroup>
</Playground>

{() => {
    class StateManager extends React.Component {
      constructor(props, context) {
        super(props, context)
        this.state = {
          isChecked: false,
        }
        this.toggle = this.toggle.bind(this)
      }
      toggle() {
        this.setState({ isChecked: !this.state.isChecked })
      }
      render() {
        return (
          <SpacedGroup direction="vertical">
            <IconSwitch
              checkedIcon={<CheckIcon color={palette.gunmetal} />}
              uncheckedIcon={<CloseIcon color={palette.dove} />}
              checked={this.state.isChecked}
              onClick={this.toggle}
            />
          
        )
      }
    }
    return <StateManager />
  }}
</Playground>

<IconSwitch
  data-trackingid="confirm-manuel-action"
  checkedIcon={<CheckIcon color={palette.gunmetal} />}
  uncheckedIcon={<CloseIcon color={palette.dove} />}
/>