React

HTML

<div id="app"></div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

.done {
  color: rgba(0, 0, 0, 0.3);
  text-decoration: line-through;
}

input {
  margin-right: 5px;
}

React

const icons = {
  activity: <polyline points="22 12 18 12 15 21 9 3 6 12 2 12" />,
  airplay: <g><path d="M5 17H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-1" /><polygon points="12 15 17 21 7 21 12 15" /></g>,
  "alert-circle": <g><circle cx={12} cy={12} r={10} /><line x1={12} y1={8} x2={12} y2={12} /><line x1={12} y1={16} x2={12} y2={16} /></g>,
  "alert-octagon": <g><polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2" /><line x1={12} y1={8} x2={12} y2={12} /><line x1={12} y1={16} x2={12} y2={16} /></g>,
  "alert-triangle": <g><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" /><line x1={12} y1={9} x2={12} y2={13} /><line x1={12} y1={17} x2={12} y2={17} /></g>,
  "align-center": <g><line x1={18} y1={10} x2={6} y2={10} /><line x1={21} y1={6} x2={3} y2={6} /><line x1={21} y1={14} x2={3} y2={14} /><line x1={18} y1={18} x2={6} y2={18} /></g>,
  "align-justify": <g><line x1={21} y1={10} x2={3} y2={10} /><line x1={21} y1={6} x2={3} y2={6} /><line x1={21} y1={14} x2={3} y2={14} /><line x1={21} y1={18} x2={3} y2={18} /></g>,
  "align-left": <g><line x1={17} y1={10} x2={3} y2={10} /><line x1={21} y1={6} x2={3} y2={6} /><line x1={21} y1={14} x2={3} y2={14} /><line x1={17} y1={18} x2={3} y2={18} /></g>,
  "align-right": <g><line x1={21} y1={10} x2={7} y2={10} /><line x1={21} y1={6} x2={3} y2={6} /><line x1={21} y1={14} x2={3} y2={14} /><line x1={21} y1={18} x2={7} y2={18} /></g>,
  anchor: <g><circle cx={12} cy={5} r={3} /><line x1={12} y1={22} x2={12} y2={8} /><path d="M5 12H2a10 10 0 0 0 20 0h-3" /></g>,
  aperture: <g><circle cx={12} cy={12} r={10} /><line x1={14.31} y1={8} x2={20.05} y2={17.94} /><line x1={9.69} y1={8} x2={21.17} y2={8} /><line x1={7.38} y1={12} x2={13.12} y2={2.06} /><line x1={9.69} y1={16} x2={3.95} y2={6.06} /><line x1={14.31} y1={16} x2={2.83} y2={16} /><line x1={16.62} y1={12} x2={10.88} y2={21.94} /></g>,
  archive: <g><polyline points="21...