diff --git a/conf/base.yaml b/conf/base.yaml
index 6ecb22a40..461f118e7 100644
--- a/conf/base.yaml
+++ b/conf/base.yaml
@@ -155,9 +155,9 @@ capture:
       #   selector: '#chart'
       #   output: ./packages/funnel/doc/funnel.png
 
-      - path: /marimekko
-        selector: '#chart'
-        output: ./packages/marimekko/doc/marimekko.png
+      # - path: /marimekko
+      #   selector: '#chart'
+      #   output: ./packages/marimekko/doc/marimekko.png
 
       #########################################################################
       #
@@ -204,7 +204,7 @@ capture:
       # - path: /internal/icons/
       #   selector: '#bar-darkColored'
       #   output: ./website/src/assets/icons/bar-dark-colored.png
-    
+
       # - path: /internal/icons/
       #   selector: '#bullet-lightNeutral'
       #   output: ./website/src/assets/icons/bullet-light-neutral.png
@@ -256,7 +256,7 @@ capture:
       # - path: /internal/icons/
       #   selector: '#choropleth-darkColored'
       #   output: ./website/src/assets/icons/choropleth-dark-colored.png
-      
+
       # - path: /internal/icons/
       #   selector: '#heatmap-lightNeutral'
       #   output: ./website/src/assets/icons/heatmap-light-neutral.png
@@ -515,4 +515,17 @@ capture:
       #   output: ./website/src/assets/icons/marimekko-dark-neutral.png
       # - path: /internal/icons/
       #   selector: '#marimekko-darkColored'
-      #   output: ./website/src/assets/icons/marimekko-dark-colored.png
\ No newline at end of file
+      #   output: ./website/src/assets/icons/marimekko-dark-colored.png
+
+      - path: /internal/icons/
+        selector: '#time-range-lightNeutral'
+        output: ./website/src/assets/icons/time-range-light-neutral.png
+      - path: /internal/icons/
+        selector: '#time-range-lightColored'
+        output: ./website/src/assets/icons/time-range-light-colored.png
+      - path: /internal/icons/
+        selector: '#time-range-darkNeutral'
+        output: ./website/src/assets/icons/time-range-dark-neutral.png
+      - path: /internal/icons/
+        selector: '#time-range-darkColored'
+        output: ./website/src/assets/icons/time-range-dark-colored.png
diff --git a/website/src/assets/icons.png b/website/src/assets/icons.png
index 09dffe8e4..b7e8a5f24 100644
Binary files a/website/src/assets/icons.png and b/website/src/assets/icons.png differ
diff --git a/website/src/assets/icons/time-range-dark-colored.png b/website/src/assets/icons/time-range-dark-colored.png
new file mode 100644
index 000000000..2fb0462d1
Binary files /dev/null and b/website/src/assets/icons/time-range-dark-colored.png differ
diff --git a/website/src/assets/icons/time-range-dark-neutral.png b/website/src/assets/icons/time-range-dark-neutral.png
new file mode 100644
index 000000000..5f1b99512
Binary files /dev/null and b/website/src/assets/icons/time-range-dark-neutral.png differ
diff --git a/website/src/assets/icons/time-range-light-colored.png b/website/src/assets/icons/time-range-light-colored.png
new file mode 100644
index 000000000..2eda1c949
Binary files /dev/null and b/website/src/assets/icons/time-range-light-colored.png differ
diff --git a/website/src/assets/icons/time-range-light-neutral.png b/website/src/assets/icons/time-range-light-neutral.png
new file mode 100644
index 000000000..124f75e7f
Binary files /dev/null and b/website/src/assets/icons/time-range-light-neutral.png differ
diff --git a/website/src/assets/icons@2x.png b/website/src/assets/icons@2x.png
index 1816488df..919dc8e76 100644
Binary files a/website/src/assets/icons@2x.png and b/website/src/assets/icons@2x.png differ
diff --git a/website/src/components/icons/Icons.js b/website/src/components/icons/Icons.js
index 383db322a..71b66f2d6 100644
--- a/website/src/components/icons/Icons.js
+++ b/website/src/components/icons/Icons.js
@@ -23,6 +23,7 @@ import ScatterPlotIcon from './ScatterPlotIcon'
 import StreamIcon from './StreamIcon'
 import SunburstIcon from './SunburstIcon'
 import SwarmPlotIcon from './SwarmPlotIcon'
+import TimeRangeIcon from './TimeRangeIcon'
 import TreeMapIcon from './TreeMapIcon'
 import WaffleIcon from './WaffleIcon'
 import ParallelCoordinatesIcon from './ParallelCoordinatesIcon'
@@ -84,6 +85,7 @@ const Icons = () => (
         <StreamIcon />
         <SunburstIcon />
         <SwarmPlotIcon />
+        <TimeRangeIcon />
         <TreeMapIcon />
         <VoronoiIcon />
         <WaffleIcon />
diff --git a/website/src/components/icons/TimeRangeIcon.js b/website/src/components/icons/TimeRangeIcon.js
new file mode 100644
index 000000000..9bb292c16
--- /dev/null
+++ b/website/src/components/icons/TimeRangeIcon.js
@@ -0,0 +1,75 @@
+/*
+ * This file is part of the nivo project.
+ *
+ * (c) 2016 Raphaël Benitte
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+import React from 'react'
+import { TimeRange } from '@nivo/calendar'
+import timeRangeLightNeutralImg from '../../assets/icons/time-range-light-neutral.png'
+import timeRangeLightColoredImg from '../../assets/icons/time-range-light-colored.png'
+import timeRangeDarkNeutralImg from '../../assets/icons/time-range-dark-neutral.png'
+import timeRangeDarkColoredImg from '../../assets/icons/time-range-dark-colored.png'
+import { ICON_SIZE, Icon, colors, IconImg } from './styled'
+
+const pad = value => `0${value}`.slice(-2)
+const data = Array(21)
+    .fill('')
+    .map((_, index) => ({
+        day: `2021-06-${pad(index + 2)}`,
+        value: Math.round(Math.random() * 400),
+    }))
+
+const chartProps = {
+    width: ICON_SIZE,
+    height: ICON_SIZE,
+    data,
+    margin: {
+        top: 6,
+        right: 14,
+        bottom: 6,
+        left: 14,
+    },
+    dayRadius: 3,
+    daySpacing: 2,
+    square: false,
+    weekdayLegendOffset: 0,
+}
+
+const TimeRangeIconItem = ({ type }) => {
+    const currentColors = colors[type].colors
+
+    return (
+        <Icon id={`time-range-${type}`} type={type}>
+            <TimeRange
+                {...chartProps}
+                colors={[currentColors[4], currentColors[2], currentColors[1]]}
+                dayBorderColor="none"
+                theme={{
+                    labels: {
+                        text: {
+                            fill: 'none',
+                        },
+                    },
+                }}
+            />
+        </Icon>
+    )
+}
+
+const TimeRangeIcon = () => (
+    <>
+        <TimeRangeIconItem type="lightNeutral" />
+        <IconImg url={timeRangeLightNeutralImg} />
+        <TimeRangeIconItem type="lightColored" />
+        <IconImg url={timeRangeLightColoredImg} />
+        <TimeRangeIconItem type="darkNeutral" />
+        <IconImg url={timeRangeDarkNeutralImg} />
+        <TimeRangeIconItem type="darkColored" />
+        <IconImg url={timeRangeDarkColoredImg} />
+    </>
+)
+
+export default TimeRangeIcon
diff --git a/website/src/data/nav.js b/website/src/data/nav.js
index c6e7147fe..90c656d58 100644
--- a/website/src/data/nav.js
+++ b/website/src/data/nav.js
@@ -162,7 +162,7 @@ export const components = [
     {
         label: 'TimeRange',
         path: '/time-range/',
-        icon: 'calendar',
+        icon: 'time-range',
         tags: timeRange.TimeRange.tags,
     },
     {
diff --git a/website/src/pages/time-range/index.js b/website/src/pages/time-range/index.js
index 3c9d8431e..cd58cf038 100644
--- a/website/src/pages/time-range/index.js
+++ b/website/src/pages/time-range/index.js
@@ -73,12 +73,11 @@ const initialProperties = {
 }
 
 const TimeRange = () => {
-    console.log('m', mapper)
     return (
         <ComponentTemplate
             name="TimeRange"
             meta={meta.TimeRange}
-            icon="calendar"
+            icon="time-range"
             flavors={meta.flavors}
             currentFlavor="svg"
             properties={groups}
diff --git a/website/src/styles/icons.css b/website/src/styles/icons.css
index db1d2bd9b..1199eb6af 100644
--- a/website/src/styles/icons.css
+++ b/website/src/styles/icons.css
@@ -1,5 +1,5 @@
-/* glue: 0.13 hash: 5e66592506 */
-.sprite-icons-waffle-light-neutral,
+/* glue: 0.13 hash: 1280229ab0 */
+        .sprite-icons-waffle-light-neutral,
 .sprite-icons-waffle-light-colored,
 .sprite-icons-waffle-dark-neutral,
 .sprite-icons-waffle-dark-colored,
@@ -15,6 +15,10 @@
 .sprite-icons-treemap-grey,
 .sprite-icons-treemap-dark-neutral,
 .sprite-icons-treemap-dark-colored,
+.sprite-icons-time-range-light-neutral,
+.sprite-icons-time-range-light-colored,
+.sprite-icons-time-range-dark-neutral,
+.sprite-icons-time-range-dark-colored,
 .sprite-icons-swarmplot-light-neutral,
 .sprite-icons-swarmplot-light-colored,
 .sprite-icons-swarmplot-dark-neutral,
@@ -116,718 +120,738 @@
 .sprite-icons-area-bump-light-colored,
 .sprite-icons-area-bump-dark-neutral,
 .sprite-icons-area-bump-dark-colored {
-    background-image: url('../assets/icons.png');
-    background-repeat: no-repeat;
-}
-
-.sprite-icons-waffle-light-neutral {
-    background-position: -4px -4px;
-    width: 52px;
-    height: 52px;
-}
-
-.sprite-icons-waffle-light-colored {
-    background-position: -64px -4px;
-    width: 52px;
-    height: 52px;
-}
-
-.sprite-icons-waffle-dark-neutral {
-    background-position: -4px -64px;
-    width: 52px;
-    height: 52px;
-}
-
-.sprite-icons-waffle-dark-colored {
-    background-position: -64px -64px;
-    width: 52px;
-    height: 52px;
-}
-
-.sprite-icons-voronoi-red {
-    background-position: -124px -4px;
-    width: 52px;
-    height: 52px;
-}
-
-.sprite-icons-voronoi-light-neutral {
-    background-position: -124px -64px;
-    width: 52px;
-    height: 52px;
-}
-
-.sprite-icons-voronoi-light-colored {
-    background-position: -4px -124px;
-    width: 52px;
-    height: 52px;
-}
-
-.sprite-icons-voronoi-grey {
-    background-position: -64px -124px;
-    width: 52px;
-    height: 52px;
-}
-
-.sprite-icons-voronoi-dark-neutral {
-    background-position: -124px -124px;
-    width: 52px;
-    height: 52px;
-}
-
-.sprite-icons-voronoi-dark-colored {
-    background-position: -184px -4px;
-    width: 52px;
-    height: 52px;
-}
-
-.sprite-icons-treemap-red {
-    background-position: -184px -64px;
-    width: 52px;
-    height: 52px;
-}
-
-.sprite-icons-treemap-light-neutral {
-    background-position: -184px -124px;
-    width: 52px;
-    height: 52px;
-}
-
-.sprite-icons-treemap-light-colored {
-    background-position: -4px -184px;
-    width: 52px;
-    height: 52px;
-}
-
-.sprite-icons-treemap-grey {
-    background-position: -64px -184px;
-    width: 52px;
-    height: 52px;
-}
-
-.sprite-icons-treemap-dark-neutral {
-    background-position: -124px -184px;
-    width: 52px;
-    height: 52px;
-}
-
-.sprite-icons-treemap-dark-colored {
-    background-position: -184px -184px;
-    width: 52px;
-    height: 52px;
-}
-
-.sprite-icons-swarmplot-light-neutral {
-    background-position: -244px -4px;
-    width: 52px;
-    height: 52px;
-}
-
-.sprite-icons-swarmplot-light-colored {
-    background-position: -244px -64px;
-    width: 52px;
-    height: 52px;
-}
-
-.sprite-icons-swarmplot-dark-neutral {
-    background-position: -244px -124px;
-    width: 52px;
-    height: 52px;
-}
-
-.sprite-icons-swarmplot-dark-colored {
-    background-position: -244px -184px;
-    width: 52px;
-    height: 52px;
-}
-
-.sprite-icons-sunburst-red {
-    background-position: -4px -244px;
-    width: 52px;
-    height: 52px;
-}
-
-.sprite-icons-sunburst-light-neutral {
-    background-position: -64px -244px;
-    width: 52px;
-    height: 52px;
-}
-
-.sprite-icons-sunburst-light-colored {
-    background-position: -124px -244px;
-    width: 52px;
-    height: 52px;
-}
-
-.sprite-icons-sunburst-grey {
-    background-position: -184px -244px;
-    width: 52px;
-    height: 52px;
-}
-
-.sprite-icons-sunburst-dark-neutral {
-    background-position: -244px -244px;
-    width: 52px;
-    height: 52px;
-}
-
-.sprite-icons-sunburst-dark-colored {
-    background-position: -304px -4px;
-    width: 52px;
-    height: 52px;
-}
-
-.sprite-icons-stream-light-neutral {
-    background-position: -304px -64px;
-    width: 52px;
-    height: 52px;
-}
-
-.sprite-icons-stream-light-colored {
-    background-position: -304px -124px;
-    width: 52px;
-    height: 52px;
-}
-
-.sprite-icons-stream-dark-neutral {
-    background-position: -304px -184px;
-    width: 52px;
-    height: 52px;
-}
-
-.sprite-icons-stream-dark-colored {
-    background-position: -304px -244px;
-    width: 52px;
-    height: 52px;
-}
-
-.sprite-icons-scatterplot-light-neutral {
-    background-position: -4px -304px;
-    width: 52px;
-    height: 52px;
-}
-
-.sprite-icons-scatterplot-light-colored {
-    background-position: -64px -304px;
-    width: 52px;
-    height: 52px;
-}
-
-.sprite-icons-scatterplot-dark-neutral {
-    background-position: -124px -304px;
-    width: 52px;
-    height: 52px;
-}
-
-.sprite-icons-scatterplot-dark-colored {
-    background-position: -184px -304px;
-    width: 52px;
-    height: 52px;
-}
-
-.sprite-icons-sankey-red {
-    background-position: -244px -304px;
-    width: 52px;
-    height: 52px;
-}
-
-.sprite-icons-sankey-light-neutral {
-    background-position: -304px -304px;
-    width: 52px;
-    height: 52px;
-}
-
-.sprite-icons-sankey-light-colored {
-    background-position: -364px -4px;
-    width: 52px;
-    height: 52px;
-}
-
-.sprite-icons-sankey-grey {
-    background-position: -364px -64px;
-    width: 52px;
-    height: 52px;
-}
-
-.sprite-icons-sankey-dark-neutral {
-    background-position: -364px -124px;
-    width: 52px;
-    height: 52px;
-}
-
-.sprite-icons-sankey-dark-colored {
-    background-position: -364px -184px;
-    width: 52px;
-    height: 52px;
-}
-
-.sprite-icons-radar-light-neutral {
-    background-position: -364px -244px;
-    width: 52px;
-    height: 52px;
-}
-
-.sprite-icons-radar-light-colored {
-    background-position: -364px -304px;
-    width: 52px;
-    height: 52px;
-}
-
-.sprite-icons-radar-dark-neutral {
-    background-position: -4px -364px;
-    width: 52px;
-    height: 52px;
-}
-
-.sprite-icons-radar-dark-colored {
-    background-position: -64px -364px;
-    width: 52px;
-    height: 52px;
-}
-
-.sprite-icons-pie-light-neutral {
-    background-position: -124px -364px;
-    width: 52px;
-    height: 52px;
-}
-
-.sprite-icons-pie-light-colored {
-    background-position: -184px -364px;
-    width: 52px;
-    height: 52px;
-}
-
-.sprite-icons-pie-dark-neutral {
-    background-position: -244px -364px;
-    width: 52px;
-    height: 52px;
-}
-
-.sprite-icons-pie-dark-colored {
-    background-position: -304px -364px;
-    width: 52px;
-    height: 52px;
-}
-
-.sprite-icons-parallel-coordinates-light-neutral {
-    background-position: -364px -364px;
-    width: 52px;
-    height: 52px;
-}
-
-.sprite-icons-parallel-coordinates-light-colored {
-    background-position: -424px -4px;
-    width: 52px;
-    height: 52px;
-}
-
-.sprite-icons-parallel-coordinates-dark-neutral {
-    background-position: -424px -64px;
-    width: 52px;
-    height: 52px;
-}
-
-.sprite-icons-parallel-coordinates-dark-colored {
-    background-position: -424px -124px;
-    width: 52px;
-    height: 52px;
-}
-
-.sprite-icons-nivo-icon {
-    background-position: -424px -184px;
-    width: 52px;
-    height: 52px;
-}
-
-.sprite-icons-network-light-neutral {
-    background-position: -424px -244px;
-    width: 52px;
-    height: 52px;
-}
-
-.sprite-icons-network-light-colored {
-    background-position: -424px -304px;
-    width: 52px;
-    height: 52px;
-}
-
-.sprite-icons-network-dark-neutral {
-    background-position: -424px -364px;
-    width: 52px;
-    height: 52px;
-}
-
-.sprite-icons-network-dark-colored {
-    background-position: -4px -424px;
-    width: 52px;
-    height: 52px;
-}
-
-.sprite-icons-marimekko-light-neutral {
-    background-position: -64px -424px;
-    width: 52px;
-    height: 52px;
-}
-
-.sprite-icons-marimekko-light-colored {
-    background-position: -124px -424px;
-    width: 52px;
-    height: 52px;
-}
-
-.sprite-icons-marimekko-dark-neutral {
-    background-position: -184px -424px;
-    width: 52px;
-    height: 52px;
-}
-
-.sprite-icons-marimekko-dark-colored {
-    background-position: -244px -424px;
-    width: 52px;
-    height: 52px;
-}
-
-.sprite-icons-line-light-neutral {
-    background-position: -304px -424px;
-    width: 52px;
-    height: 52px;
-}
-
-.sprite-icons-line-light-colored {
-    background-position: -364px -424px;
-    width: 52px;
-    height: 52px;
-}
-
-.sprite-icons-line-dark-neutral {
-    background-position: -424px -424px;
-    width: 52px;
-    height: 52px;
-}
-
-.sprite-icons-line-dark-colored {
-    background-position: -484px -4px;
-    width: 52px;
-    height: 52px;
-}
-
-.sprite-icons-heatmap-light-neutral {
-    background-position: -484px -64px;
-    width: 52px;
-    height: 52px;
-}
-
-.sprite-icons-heatmap-light-colored {
-    background-position: -484px -124px;
-    width: 52px;
-    height: 52px;
-}
-
-.sprite-icons-heatmap-dark-neutral {
-    background-position: -484px -184px;
-    width: 52px;
-    height: 52px;
-}
-
-.sprite-icons-heatmap-dark-colored {
-    background-position: -484px -244px;
-    width: 52px;
-    height: 52px;
-}
-
-.sprite-icons-geomap-light-neutral {
-    background-position: -484px -304px;
-    width: 52px;
-    height: 52px;
-}
-
-.sprite-icons-geomap-light-colored {
-    background-position: -484px -364px;
-    width: 52px;
-    height: 52px;
-}
-
-.sprite-icons-geomap-dark-neutral {
-    background-position: -484px -424px;
-    width: 52px;
-    height: 52px;
-}
-
-.sprite-icons-geomap-dark-colored {
-    background-position: -4px -484px;
-    width: 52px;
-    height: 52px;
-}
-
-.sprite-icons-funnel-light-neutral {
-    background-position: -64px -484px;
-    width: 52px;
-    height: 52px;
-}
-
-.sprite-icons-funnel-light-colored {
-    background-position: -124px -484px;
-    width: 52px;
-    height: 52px;
-}
-
-.sprite-icons-funnel-dark-neutral {
-    background-position: -184px -484px;
-    width: 52px;
-    height: 52px;
-}
-
-.sprite-icons-funnel-dark-colored {
-    background-position: -244px -484px;
-    width: 52px;
-    height: 52px;
-}
-
-.sprite-icons-data-light-neutral {
-    background-position: -304px -484px;
-    width: 52px;
-    height: 52px;
-}
-
-.sprite-icons-data-light-colored {
-    background-position: -364px -484px;
-    width: 52px;
-    height: 52px;
-}
-
-.sprite-icons-data-dark-neutral {
-    background-position: -424px -484px;
-    width: 52px;
-    height: 52px;
-}
-
-.sprite-icons-data-dark-colored {
-    background-position: -484px -484px;
-    width: 52px;
-    height: 52px;
-}
-
-.sprite-icons-code-light-neutral {
-    background-position: -544px -4px;
-    width: 52px;
-    height: 52px;
-}
-
-.sprite-icons-code-light-colored {
-    background-position: -544px -64px;
-    width: 52px;
-    height: 52px;
-}
-
-.sprite-icons-code-dark-neutral {
-    background-position: -544px -124px;
-    width: 52px;
-    height: 52px;
-}
-
-.sprite-icons-code-dark-colored {
-    background-position: -544px -184px;
-    width: 52px;
-    height: 52px;
-}
-
-.sprite-icons-circle-packing-light-neutral {
-    background-position: -544px -244px;
-    width: 52px;
-    height: 52px;
-}
-
-.sprite-icons-circle-packing-light-colored {
-    background-position: -544px -304px;
-    width: 52px;
-    height: 52px;
-}
-
-.sprite-icons-circle-packing-dark-neutral {
-    background-position: -544px -364px;
-    width: 52px;
-    height: 52px;
-}
-
-.sprite-icons-circle-packing-dark-colored {
-    background-position: -544px -424px;
-    width: 52px;
-    height: 52px;
-}
-
-.sprite-icons-choropleth-light-neutral {
-    background-position: -544px -484px;
-    width: 52px;
-    height: 52px;
-}
-
-.sprite-icons-choropleth-light-colored {
-    background-position: -4px -544px;
-    width: 52px;
-    height: 52px;
-}
-
-.sprite-icons-choropleth-dark-neutral {
-    background-position: -64px -544px;
-    width: 52px;
-    height: 52px;
-}
-
-.sprite-icons-choropleth-dark-colored {
-    background-position: -124px -544px;
-    width: 52px;
-    height: 52px;
-}
-
-.sprite-icons-chord-light-neutral {
-    background-position: -184px -544px;
-    width: 52px;
-    height: 52px;
-}
-
-.sprite-icons-chord-light-colored {
-    background-position: -244px -544px;
-    width: 52px;
-    height: 52px;
-}
-
-.sprite-icons-chord-dark-neutral {
-    background-position: -304px -544px;
-    width: 52px;
-    height: 52px;
-}
-
-.sprite-icons-chord-dark-colored {
-    background-position: -364px -544px;
-    width: 52px;
-    height: 52px;
-}
-
-.sprite-icons-calendar-light-neutral {
-    background-position: -424px -544px;
-    width: 52px;
-    height: 52px;
-}
-
-.sprite-icons-calendar-light-colored {
-    background-position: -484px -544px;
-    width: 52px;
-    height: 52px;
-}
-
-.sprite-icons-calendar-dark-neutral {
-    background-position: -544px -544px;
-    width: 52px;
-    height: 52px;
-}
-
-.sprite-icons-calendar-dark-colored {
-    background-position: -604px -4px;
-    width: 52px;
-    height: 52px;
-}
-
-.sprite-icons-bump-light-neutral {
-    background-position: -604px -64px;
-    width: 52px;
-    height: 52px;
-}
-
-.sprite-icons-bump-light-colored {
-    background-position: -604px -124px;
-    width: 52px;
-    height: 52px;
-}
-
-.sprite-icons-bump-dark-neutral {
-    background-position: -604px -184px;
-    width: 52px;
-    height: 52px;
-}
-
-.sprite-icons-bump-dark-colored {
-    background-position: -604px -244px;
-    width: 52px;
-    height: 52px;
-}
-
-.sprite-icons-bullet-light-neutral {
-    background-position: -604px -304px;
-    width: 52px;
-    height: 52px;
-}
-
-.sprite-icons-bullet-light-colored {
-    background-position: -604px -364px;
-    width: 52px;
-    height: 52px;
-}
-
-.sprite-icons-bullet-dark-neutral {
-    background-position: -604px -424px;
-    width: 52px;
-    height: 52px;
-}
-
-.sprite-icons-bullet-dark-colored {
-    background-position: -604px -484px;
-    width: 52px;
-    height: 52px;
-}
-
-.sprite-icons-bar-light-neutral {
-    background-position: -604px -544px;
-    width: 52px;
-    height: 52px;
-}
-
-.sprite-icons-bar-light-colored {
-    background-position: -4px -604px;
-    width: 52px;
-    height: 52px;
-}
-
-.sprite-icons-bar-dark-neutral {
-    background-position: -64px -604px;
-    width: 52px;
-    height: 52px;
-}
-
-.sprite-icons-bar-dark-colored {
-    background-position: -124px -604px;
-    width: 52px;
-    height: 52px;
-}
-
-.sprite-icons-area-bump-light-neutral {
-    background-position: -184px -604px;
-    width: 52px;
-    height: 52px;
-}
-
-.sprite-icons-area-bump-light-colored {
-    background-position: -244px -604px;
-    width: 52px;
-    height: 52px;
-}
-
-.sprite-icons-area-bump-dark-neutral {
-    background-position: -304px -604px;
-    width: 52px;
-    height: 52px;
-}
-
-.sprite-icons-area-bump-dark-colored {
-    background-position: -364px -604px;
-    width: 52px;
-    height: 52px;
-}
-
-@media screen and (-webkit-min-device-pixel-ratio: 1),
-    screen and (min--moz-device-pixel-ratio: 1),
-    screen and (-o-min-device-pixel-ratio: 100/100),
-    screen and (min-device-pixel-ratio: 1),
-    screen and (min-resolution: 1dppx) {
-    .sprite-icons-waffle-light-neutral,
+            background-image: url('../assets/icons.png');
+            background-repeat: no-repeat;
+        }
+        
+        .sprite-icons-waffle-light-neutral {
+            background-position: -4px -4px;
+            width: 52px;
+            height: 52px;
+        }
+        
+        .sprite-icons-waffle-light-colored {
+            background-position: -64px -4px;
+            width: 52px;
+            height: 52px;
+        }
+        
+        .sprite-icons-waffle-dark-neutral {
+            background-position: -4px -64px;
+            width: 52px;
+            height: 52px;
+        }
+        
+        .sprite-icons-waffle-dark-colored {
+            background-position: -64px -64px;
+            width: 52px;
+            height: 52px;
+        }
+        
+        .sprite-icons-voronoi-red {
+            background-position: -124px -4px;
+            width: 52px;
+            height: 52px;
+        }
+        
+        .sprite-icons-voronoi-light-neutral {
+            background-position: -124px -64px;
+            width: 52px;
+            height: 52px;
+        }
+        
+        .sprite-icons-voronoi-light-colored {
+            background-position: -4px -124px;
+            width: 52px;
+            height: 52px;
+        }
+        
+        .sprite-icons-voronoi-grey {
+            background-position: -64px -124px;
+            width: 52px;
+            height: 52px;
+        }
+        
+        .sprite-icons-voronoi-dark-neutral {
+            background-position: -124px -124px;
+            width: 52px;
+            height: 52px;
+        }
+        
+        .sprite-icons-voronoi-dark-colored {
+            background-position: -184px -4px;
+            width: 52px;
+            height: 52px;
+        }
+        
+        .sprite-icons-treemap-red {
+            background-position: -184px -64px;
+            width: 52px;
+            height: 52px;
+        }
+        
+        .sprite-icons-treemap-light-neutral {
+            background-position: -184px -124px;
+            width: 52px;
+            height: 52px;
+        }
+        
+        .sprite-icons-treemap-light-colored {
+            background-position: -4px -184px;
+            width: 52px;
+            height: 52px;
+        }
+        
+        .sprite-icons-treemap-grey {
+            background-position: -64px -184px;
+            width: 52px;
+            height: 52px;
+        }
+        
+        .sprite-icons-treemap-dark-neutral {
+            background-position: -124px -184px;
+            width: 52px;
+            height: 52px;
+        }
+        
+        .sprite-icons-treemap-dark-colored {
+            background-position: -184px -184px;
+            width: 52px;
+            height: 52px;
+        }
+        
+        .sprite-icons-time-range-light-neutral {
+            background-position: -244px -4px;
+            width: 52px;
+            height: 52px;
+        }
+        
+        .sprite-icons-time-range-light-colored {
+            background-position: -244px -64px;
+            width: 52px;
+            height: 52px;
+        }
+        
+        .sprite-icons-time-range-dark-neutral {
+            background-position: -244px -124px;
+            width: 52px;
+            height: 52px;
+        }
+        
+        .sprite-icons-time-range-dark-colored {
+            background-position: -244px -184px;
+            width: 52px;
+            height: 52px;
+        }
+        
+        .sprite-icons-swarmplot-light-neutral {
+            background-position: -4px -244px;
+            width: 52px;
+            height: 52px;
+        }
+        
+        .sprite-icons-swarmplot-light-colored {
+            background-position: -64px -244px;
+            width: 52px;
+            height: 52px;
+        }
+        
+        .sprite-icons-swarmplot-dark-neutral {
+            background-position: -124px -244px;
+            width: 52px;
+            height: 52px;
+        }
+        
+        .sprite-icons-swarmplot-dark-colored {
+            background-position: -184px -244px;
+            width: 52px;
+            height: 52px;
+        }
+        
+        .sprite-icons-sunburst-red {
+            background-position: -244px -244px;
+            width: 52px;
+            height: 52px;
+        }
+        
+        .sprite-icons-sunburst-light-neutral {
+            background-position: -304px -4px;
+            width: 52px;
+            height: 52px;
+        }
+        
+        .sprite-icons-sunburst-light-colored {
+            background-position: -304px -64px;
+            width: 52px;
+            height: 52px;
+        }
+        
+        .sprite-icons-sunburst-grey {
+            background-position: -304px -124px;
+            width: 52px;
+            height: 52px;
+        }
+        
+        .sprite-icons-sunburst-dark-neutral {
+            background-position: -304px -184px;
+            width: 52px;
+            height: 52px;
+        }
+        
+        .sprite-icons-sunburst-dark-colored {
+            background-position: -304px -244px;
+            width: 52px;
+            height: 52px;
+        }
+        
+        .sprite-icons-stream-light-neutral {
+            background-position: -4px -304px;
+            width: 52px;
+            height: 52px;
+        }
+        
+        .sprite-icons-stream-light-colored {
+            background-position: -64px -304px;
+            width: 52px;
+            height: 52px;
+        }
+        
+        .sprite-icons-stream-dark-neutral {
+            background-position: -124px -304px;
+            width: 52px;
+            height: 52px;
+        }
+        
+        .sprite-icons-stream-dark-colored {
+            background-position: -184px -304px;
+            width: 52px;
+            height: 52px;
+        }
+        
+        .sprite-icons-scatterplot-light-neutral {
+            background-position: -244px -304px;
+            width: 52px;
+            height: 52px;
+        }
+        
+        .sprite-icons-scatterplot-light-colored {
+            background-position: -304px -304px;
+            width: 52px;
+            height: 52px;
+        }
+        
+        .sprite-icons-scatterplot-dark-neutral {
+            background-position: -364px -4px;
+            width: 52px;
+            height: 52px;
+        }
+        
+        .sprite-icons-scatterplot-dark-colored {
+            background-position: -364px -64px;
+            width: 52px;
+            height: 52px;
+        }
+        
+        .sprite-icons-sankey-red {
+            background-position: -364px -124px;
+            width: 52px;
+            height: 52px;
+        }
+        
+        .sprite-icons-sankey-light-neutral {
+            background-position: -364px -184px;
+            width: 52px;
+            height: 52px;
+        }
+        
+        .sprite-icons-sankey-light-colored {
+            background-position: -364px -244px;
+            width: 52px;
+            height: 52px;
+        }
+        
+        .sprite-icons-sankey-grey {
+            background-position: -364px -304px;
+            width: 52px;
+            height: 52px;
+        }
+        
+        .sprite-icons-sankey-dark-neutral {
+            background-position: -4px -364px;
+            width: 52px;
+            height: 52px;
+        }
+        
+        .sprite-icons-sankey-dark-colored {
+            background-position: -64px -364px;
+            width: 52px;
+            height: 52px;
+        }
+        
+        .sprite-icons-radar-light-neutral {
+            background-position: -124px -364px;
+            width: 52px;
+            height: 52px;
+        }
+        
+        .sprite-icons-radar-light-colored {
+            background-position: -184px -364px;
+            width: 52px;
+            height: 52px;
+        }
+        
+        .sprite-icons-radar-dark-neutral {
+            background-position: -244px -364px;
+            width: 52px;
+            height: 52px;
+        }
+        
+        .sprite-icons-radar-dark-colored {
+            background-position: -304px -364px;
+            width: 52px;
+            height: 52px;
+        }
+        
+        .sprite-icons-pie-light-neutral {
+            background-position: -364px -364px;
+            width: 52px;
+            height: 52px;
+        }
+        
+        .sprite-icons-pie-light-colored {
+            background-position: -424px -4px;
+            width: 52px;
+            height: 52px;
+        }
+        
+        .sprite-icons-pie-dark-neutral {
+            background-position: -424px -64px;
+            width: 52px;
+            height: 52px;
+        }
+        
+        .sprite-icons-pie-dark-colored {
+            background-position: -424px -124px;
+            width: 52px;
+            height: 52px;
+        }
+        
+        .sprite-icons-parallel-coordinates-light-neutral {
+            background-position: -424px -184px;
+            width: 52px;
+            height: 52px;
+        }
+        
+        .sprite-icons-parallel-coordinates-light-colored {
+            background-position: -424px -244px;
+            width: 52px;
+            height: 52px;
+        }
+        
+        .sprite-icons-parallel-coordinates-dark-neutral {
+            background-position: -424px -304px;
+            width: 52px;
+            height: 52px;
+        }
+        
+        .sprite-icons-parallel-coordinates-dark-colored {
+            background-position: -424px -364px;
+            width: 52px;
+            height: 52px;
+        }
+        
+        .sprite-icons-nivo-icon {
+            background-position: -4px -424px;
+            width: 52px;
+            height: 52px;
+        }
+        
+        .sprite-icons-network-light-neutral {
+            background-position: -64px -424px;
+            width: 52px;
+            height: 52px;
+        }
+        
+        .sprite-icons-network-light-colored {
+            background-position: -124px -424px;
+            width: 52px;
+            height: 52px;
+        }
+        
+        .sprite-icons-network-dark-neutral {
+            background-position: -184px -424px;
+            width: 52px;
+            height: 52px;
+        }
+        
+        .sprite-icons-network-dark-colored {
+            background-position: -244px -424px;
+            width: 52px;
+            height: 52px;
+        }
+        
+        .sprite-icons-marimekko-light-neutral {
+            background-position: -304px -424px;
+            width: 52px;
+            height: 52px;
+        }
+        
+        .sprite-icons-marimekko-light-colored {
+            background-position: -364px -424px;
+            width: 52px;
+            height: 52px;
+        }
+        
+        .sprite-icons-marimekko-dark-neutral {
+            background-position: -424px -424px;
+            width: 52px;
+            height: 52px;
+        }
+        
+        .sprite-icons-marimekko-dark-colored {
+            background-position: -484px -4px;
+            width: 52px;
+            height: 52px;
+        }
+        
+        .sprite-icons-line-light-neutral {
+            background-position: -484px -64px;
+            width: 52px;
+            height: 52px;
+        }
+        
+        .sprite-icons-line-light-colored {
+            background-position: -484px -124px;
+            width: 52px;
+            height: 52px;
+        }
+        
+        .sprite-icons-line-dark-neutral {
+            background-position: -484px -184px;
+            width: 52px;
+            height: 52px;
+        }
+        
+        .sprite-icons-line-dark-colored {
+            background-position: -484px -244px;
+            width: 52px;
+            height: 52px;
+        }
+        
+        .sprite-icons-heatmap-light-neutral {
+            background-position: -484px -304px;
+            width: 52px;
+            height: 52px;
+        }
+        
+        .sprite-icons-heatmap-light-colored {
+            background-position: -484px -364px;
+            width: 52px;
+            height: 52px;
+        }
+        
+        .sprite-icons-heatmap-dark-neutral {
+            background-position: -484px -424px;
+            width: 52px;
+            height: 52px;
+        }
+        
+        .sprite-icons-heatmap-dark-colored {
+            background-position: -4px -484px;
+            width: 52px;
+            height: 52px;
+        }
+        
+        .sprite-icons-geomap-light-neutral {
+            background-position: -64px -484px;
+            width: 52px;
+            height: 52px;
+        }
+        
+        .sprite-icons-geomap-light-colored {
+            background-position: -124px -484px;
+            width: 52px;
+            height: 52px;
+        }
+        
+        .sprite-icons-geomap-dark-neutral {
+            background-position: -184px -484px;
+            width: 52px;
+            height: 52px;
+        }
+        
+        .sprite-icons-geomap-dark-colored {
+            background-position: -244px -484px;
+            width: 52px;
+            height: 52px;
+        }
+        
+        .sprite-icons-funnel-light-neutral {
+            background-position: -304px -484px;
+            width: 52px;
+            height: 52px;
+        }
+        
+        .sprite-icons-funnel-light-colored {
+            background-position: -364px -484px;
+            width: 52px;
+            height: 52px;
+        }
+        
+        .sprite-icons-funnel-dark-neutral {
+            background-position: -424px -484px;
+            width: 52px;
+            height: 52px;
+        }
+        
+        .sprite-icons-funnel-dark-colored {
+            background-position: -484px -484px;
+            width: 52px;
+            height: 52px;
+        }
+        
+        .sprite-icons-data-light-neutral {
+            background-position: -544px -4px;
+            width: 52px;
+            height: 52px;
+        }
+        
+        .sprite-icons-data-light-colored {
+            background-position: -544px -64px;
+            width: 52px;
+            height: 52px;
+        }
+        
+        .sprite-icons-data-dark-neutral {
+            background-position: -544px -124px;
+            width: 52px;
+            height: 52px;
+        }
+        
+        .sprite-icons-data-dark-colored {
+            background-position: -544px -184px;
+            width: 52px;
+            height: 52px;
+        }
+        
+        .sprite-icons-code-light-neutral {
+            background-position: -544px -244px;
+            width: 52px;
+            height: 52px;
+        }
+        
+        .sprite-icons-code-light-colored {
+            background-position: -544px -304px;
+            width: 52px;
+            height: 52px;
+        }
+        
+        .sprite-icons-code-dark-neutral {
+            background-position: -544px -364px;
+            width: 52px;
+            height: 52px;
+        }
+        
+        .sprite-icons-code-dark-colored {
+            background-position: -544px -424px;
+            width: 52px;
+            height: 52px;
+        }
+        
+        .sprite-icons-circle-packing-light-neutral {
+            background-position: -544px -484px;
+            width: 52px;
+            height: 52px;
+        }
+        
+        .sprite-icons-circle-packing-light-colored {
+            background-position: -4px -544px;
+            width: 52px;
+            height: 52px;
+        }
+        
+        .sprite-icons-circle-packing-dark-neutral {
+            background-position: -64px -544px;
+            width: 52px;
+            height: 52px;
+        }
+        
+        .sprite-icons-circle-packing-dark-colored {
+            background-position: -124px -544px;
+            width: 52px;
+            height: 52px;
+        }
+        
+        .sprite-icons-choropleth-light-neutral {
+            background-position: -184px -544px;
+            width: 52px;
+            height: 52px;
+        }
+        
+        .sprite-icons-choropleth-light-colored {
+            background-position: -244px -544px;
+            width: 52px;
+            height: 52px;
+        }
+        
+        .sprite-icons-choropleth-dark-neutral {
+            background-position: -304px -544px;
+            width: 52px;
+            height: 52px;
+        }
+        
+        .sprite-icons-choropleth-dark-colored {
+            background-position: -364px -544px;
+            width: 52px;
+            height: 52px;
+        }
+        
+        .sprite-icons-chord-light-neutral {
+            background-position: -424px -544px;
+            width: 52px;
+            height: 52px;
+        }
+        
+        .sprite-icons-chord-light-colored {
+            background-position: -484px -544px;
+            width: 52px;
+            height: 52px;
+        }
+        
+        .sprite-icons-chord-dark-neutral {
+            background-position: -544px -544px;
+            width: 52px;
+            height: 52px;
+        }
+        
+        .sprite-icons-chord-dark-colored {
+            background-position: -604px -4px;
+            width: 52px;
+            height: 52px;
+        }
+        
+        .sprite-icons-calendar-light-neutral {
+            background-position: -604px -64px;
+            width: 52px;
+            height: 52px;
+        }
+        
+        .sprite-icons-calendar-light-colored {
+            background-position: -604px -124px;
+            width: 52px;
+            height: 52px;
+        }
+        
+        .sprite-icons-calendar-dark-neutral {
+            background-position: -604px -184px;
+            width: 52px;
+            height: 52px;
+        }
+        
+        .sprite-icons-calendar-dark-colored {
+            background-position: -604px -244px;
+            width: 52px;
+            height: 52px;
+        }
+        
+        .sprite-icons-bump-light-neutral {
+            background-position: -604px -304px;
+            width: 52px;
+            height: 52px;
+        }
+        
+        .sprite-icons-bump-light-colored {
+            background-position: -604px -364px;
+            width: 52px;
+            height: 52px;
+        }
+        
+        .sprite-icons-bump-dark-neutral {
+            background-position: -604px -424px;
+            width: 52px;
+            height: 52px;
+        }
+        
+        .sprite-icons-bump-dark-colored {
+            background-position: -604px -484px;
+            width: 52px;
+            height: 52px;
+        }
+        
+        .sprite-icons-bullet-light-neutral {
+            background-position: -604px -544px;
+            width: 52px;
+            height: 52px;
+        }
+        
+        .sprite-icons-bullet-light-colored {
+            background-position: -4px -604px;
+            width: 52px;
+            height: 52px;
+        }
+        
+        .sprite-icons-bullet-dark-neutral {
+            background-position: -64px -604px;
+            width: 52px;
+            height: 52px;
+        }
+        
+        .sprite-icons-bullet-dark-colored {
+            background-position: -124px -604px;
+            width: 52px;
+            height: 52px;
+        }
+        
+        .sprite-icons-bar-light-neutral {
+            background-position: -184px -604px;
+            width: 52px;
+            height: 52px;
+        }
+        
+        .sprite-icons-bar-light-colored {
+            background-position: -244px -604px;
+            width: 52px;
+            height: 52px;
+        }
+        
+        .sprite-icons-bar-dark-neutral {
+            background-position: -304px -604px;
+            width: 52px;
+            height: 52px;
+        }
+        
+        .sprite-icons-bar-dark-colored {
+            background-position: -364px -604px;
+            width: 52px;
+            height: 52px;
+        }
+        
+        .sprite-icons-area-bump-light-neutral {
+            background-position: -424px -604px;
+            width: 52px;
+            height: 52px;
+        }
+        
+        .sprite-icons-area-bump-light-colored {
+            background-position: -484px -604px;
+            width: 52px;
+            height: 52px;
+        }
+        
+        .sprite-icons-area-bump-dark-neutral {
+            background-position: -544px -604px;
+            width: 52px;
+            height: 52px;
+        }
+        
+        .sprite-icons-area-bump-dark-colored {
+            background-position: -604px -604px;
+            width: 52px;
+            height: 52px;
+        }
+        
+        @media screen and (-webkit-min-device-pixel-ratio: 1.0), screen and (min--moz-device-pixel-ratio: 1.0), screen and (-o-min-device-pixel-ratio: 100/100), screen and (min-device-pixel-ratio: 1.0), screen and (min-resolution: 1.0dppx) {
+            .sprite-icons-waffle-light-neutral,
     .sprite-icons-waffle-light-colored,
     .sprite-icons-waffle-dark-neutral,
     .sprite-icons-waffle-dark-colored,
@@ -843,6 +867,10 @@
     .sprite-icons-treemap-grey,
     .sprite-icons-treemap-dark-neutral,
     .sprite-icons-treemap-dark-colored,
+    .sprite-icons-time-range-light-neutral,
+    .sprite-icons-time-range-light-colored,
+    .sprite-icons-time-range-dark-neutral,
+    .sprite-icons-time-range-dark-colored,
     .sprite-icons-swarmplot-light-neutral,
     .sprite-icons-swarmplot-light-colored,
     .sprite-icons-swarmplot-dark-neutral,
@@ -944,19 +972,15 @@
     .sprite-icons-area-bump-light-colored,
     .sprite-icons-area-bump-dark-neutral,
     .sprite-icons-area-bump-dark-colored {
-        background-image: url('../assets/icons.png');
-        -webkit-background-size: 660px 660px;
-        -moz-background-size: 660px 660px;
-        background-size: 660px 660px;
-    }
-}
-
-@media screen and (-webkit-min-device-pixel-ratio: 2),
-    screen and (min--moz-device-pixel-ratio: 2),
-    screen and (-o-min-device-pixel-ratio: 200/100),
-    screen and (min-device-pixel-ratio: 2),
-    screen and (min-resolution: 2dppx) {
-    .sprite-icons-waffle-light-neutral,
+                background-image: url('../assets/icons.png');
+                -webkit-background-size: 660px 660px;
+                -moz-background-size: 660px 660px;
+                background-size: 660px 660px;
+            }
+        }
+        
+        @media screen and (-webkit-min-device-pixel-ratio: 2.0), screen and (min--moz-device-pixel-ratio: 2.0), screen and (-o-min-device-pixel-ratio: 200/100), screen and (min-device-pixel-ratio: 2.0), screen and (min-resolution: 2.0dppx) {
+            .sprite-icons-waffle-light-neutral,
     .sprite-icons-waffle-light-colored,
     .sprite-icons-waffle-dark-neutral,
     .sprite-icons-waffle-dark-colored,
@@ -972,6 +996,10 @@
     .sprite-icons-treemap-grey,
     .sprite-icons-treemap-dark-neutral,
     .sprite-icons-treemap-dark-colored,
+    .sprite-icons-time-range-light-neutral,
+    .sprite-icons-time-range-light-colored,
+    .sprite-icons-time-range-dark-neutral,
+    .sprite-icons-time-range-dark-colored,
     .sprite-icons-swarmplot-light-neutral,
     .sprite-icons-swarmplot-light-colored,
     .sprite-icons-swarmplot-dark-neutral,
@@ -1073,9 +1101,10 @@
     .sprite-icons-area-bump-light-colored,
     .sprite-icons-area-bump-dark-neutral,
     .sprite-icons-area-bump-dark-colored {
-        background-image: url('../assets/icons@2x.png');
-        -webkit-background-size: 660px 660px;
-        -moz-background-size: 660px 660px;
-        background-size: 660px 660px;
-    }
-}
+                background-image: url('../assets/icons@2x.png');
+                -webkit-background-size: 660px 660px;
+                -moz-background-size: 660px 660px;
+                background-size: 660px 660px;
+            }
+        }
+        
\ No newline at end of file