diff --git a/website/src/@types/file_types.d.ts b/website/src/@types/file_types.d.ts
index 96576d8f1..47049a68f 100644
--- a/website/src/@types/file_types.d.ts
+++ b/website/src/@types/file_types.d.ts
@@ -24,6 +24,15 @@ declare module '*bar/meta.yml' {
     export default meta
 }
 
+declare module '*boxplot/meta.yml' {
+    const meta: {
+        flavors: ChartMetaFlavors
+        BoxPlot: ChartMeta
+    }
+
+    export default meta
+}
+
 declare module '*bullet/meta.yml' {
     const meta: {
         flavors: ChartMetaFlavors
diff --git a/website/src/components/icons/BoxPlotIcon.tsx b/website/src/components/icons/BoxPlotIcon.tsx
index fdf9c3b93..eed95828e 100644
--- a/website/src/components/icons/BoxPlotIcon.tsx
+++ b/website/src/components/icons/BoxPlotIcon.tsx
@@ -58,7 +58,7 @@ const chartProps: BoxPlotSvgProps<any> = {
     ],
     medianWidth: 2,
     whiskerWidth: 3,
-    whiskerEndSize: .6,
+    whiskerEndSize: 0.6,
     borderRadius: 2,
     isInteractive: false,
     animate: false,
diff --git a/website/src/data/components/boxplot/generator.ts b/website/src/data/components/boxplot/generator.ts
new file mode 100644
index 000000000..3c9e72191
--- /dev/null
+++ b/website/src/data/components/boxplot/generator.ts
@@ -0,0 +1,15 @@
+import { generateBoxPlotData } from '@nivo/generators'
+
+export const generateLightDataSet = () =>
+    generateBoxPlotData([
+        { group: 'Alpha', subgroup: 'A', mu: 5, sd: 1, n: 20 },
+        { group: 'Alpha', subgroup: 'B', mu: 6, sd: 1, n: 20 },
+        { group: 'Beta', subgroup: 'A', mu: 8, sd: 1.4, n: 20 },
+        { group: 'Beta', subgroup: 'B', mu: 7.5, sd: 1.4, n: 20 },
+        { group: 'Gamma', subgroup: 'A', mu: 5, sd: 1, n: 20 },
+        { group: 'Gamma', subgroup: 'B', mu: 7.2, sd: 1.8, n: 20 },
+        { group: 'Delta', subgroup: 'A', mu: 5, sd: 1, n: 20 },
+        { group: 'Delta', subgroup: 'B', mu: 6, sd: 1, n: 20 },
+        { group: 'Epsilon', subgroup: 'A', mu: 5, sd: 1.4, n: 20 },
+        { group: 'Epsilon', subgroup: 'B', mu: 6, sd: 3, n: 20 },
+    ])
diff --git a/website/src/data/components/boxplot/mapper.ts b/website/src/data/components/boxplot/mapper.ts
new file mode 100644
index 000000000..744c870cd
--- /dev/null
+++ b/website/src/data/components/boxplot/mapper.ts
@@ -0,0 +1,14 @@
+import { settingsMapper, mapAxis, mapFormat } from '../../../lib/settings'
+
+export default settingsMapper(
+    {
+        valueFormat: mapFormat,
+        axisTop: mapAxis('top'),
+        axisRight: mapAxis('right'),
+        axisBottom: mapAxis('bottom'),
+        axisLeft: mapAxis('left'),
+    },
+    {
+        exclude: ['enable axisTop', 'enable axisRight', 'enable axisBottom', 'enable axisLeft'],
+    }
+)
diff --git a/website/src/data/components/boxplot/props.ts b/website/src/data/components/boxplot/props.ts
index aa8ca1c2e..9f102c85b 100644
--- a/website/src/data/components/boxplot/props.ts
+++ b/website/src/data/components/boxplot/props.ts
@@ -20,21 +20,90 @@ const allFlavors: Flavor[] = ['svg']
 
 const props: ChartProperty[] = [
     {
-        key: 'layout',
+        key: 'value',
         group: 'Base',
-        help: `Chart layout.`,
-        type: `'horizontal' | 'vertical'`,
         flavors: allFlavors,
+        help: 'Value accessor.',
+        description: `
+            Define how to access the value of each datum,
+            by default, nivo will look for the \`value\` property.
+        `,
+        type: 'string | (datum: RawDatum): number',
         required: false,
-        defaultValue: svgDefaultProps.layout,
+        defaultValue: svgDefaultProps.value,
+    },
+    {
+        key: 'minValue',
+        group: 'Base',
+        help: 'Minimum value.',
+        description: `
+            Minimum value, if 'auto',
+            will use min value from the provided data.
+        `,
+        required: false,
+        flavors: allFlavors,
+        defaultValue: svgDefaultProps.minValue,
+        type: `number | 'auto'`,
         control: {
-            type: 'radio',
-            choices: [
-                { label: 'horizontal', value: 'horizontal' },
-                { label: 'vertical', value: 'vertical' },
-            ],
+            type: 'switchableRange',
+            disabledValue: 'auto',
+            defaultValue: 0,
+            min: -10,
+            max: 10,
         },
     },
+    {
+        key: 'maxValue',
+        group: 'Base',
+        help: 'Maximum value.',
+        description: `
+            Maximum value, if 'auto',
+            will use max value from the provided data.
+        `,
+        required: false,
+        flavors: allFlavors,
+        defaultValue: svgDefaultProps.maxValue,
+        type: `number | 'auto'`,
+        control: {
+            type: 'switchableRange',
+            disabledValue: 'auto',
+            defaultValue: 10,
+            min: 0,
+            max: 20,
+        },
+    },
+    {
+        key: 'groupBy',
+        help: 'How to group box plots belonging to the same series',
+        type: 'string | function',
+        flavors: allFlavors,
+        defaultValue: svgDefaultProps.groupBy,
+        group: 'Base',
+    },
+    {
+        key: 'groups',
+        help: 'Specify the groups available, if omitted, it will be inferred from the provided data.',
+        type: 'string[]',
+        flavors: allFlavors,
+        defaultValue: svgDefaultProps.groups,
+        group: 'Base',
+    },
+    {
+        key: 'subGroupBy',
+        help: 'Used for sub-grouping.',
+        type: 'string | function',
+        flavors: allFlavors,
+        defaultValue: svgDefaultProps.subGroupBy,
+        group: 'Base',
+    },
+    {
+        key: 'subGroups',
+        help: 'Specify the sub-groups available, if omitted, it will be inferred from the provided data.',
+        type: 'string[]',
+        flavors: allFlavors,
+        defaultValue: svgDefaultProps.subGroups,
+        group: 'Base',
+    },
     {
         key: 'quantiles',
         group: 'Base',
@@ -93,32 +162,24 @@ const props: ChartProperty[] = [
         },
     },
     {
-        key: 'groupBy',
-        help: 'How to group box plots belonging to the same series',
-        type: 'string | function',
-        flavors: allFlavors,
-        defaultValue: svgDefaultProps.groupBy,
-        group: 'Base',
-    },
-    {
-        key: 'groups',
-        help: 'How to group box plots belonging to the same series',
-        type: 'string[]',
-        flavors: allFlavors,
-        defaultValue: svgDefaultProps.groups,
+        key: 'layout',
         group: 'Base',
-    },
-    {
-        key: 'subGroupBy',
-        help: 'How to group box plots belonging to the same series',
-        type: 'string | function',
+        help: `Chart layout.`,
+        type: `'horizontal' | 'vertical'`,
         flavors: allFlavors,
-        defaultValue: svgDefaultProps.subGroupBy,
-        group: 'Base',
+        required: false,
+        defaultValue: svgDefaultProps.layout,
+        control: {
+            type: 'radio',
+            choices: [
+                { label: 'horizontal', value: 'horizontal' },
+                { label: 'vertical', value: 'vertical' },
+            ],
+        },
     },
     {
         key: 'padding',
-        help: 'Padding between each bar (ratio).',
+        help: 'Padding between each group or boxplot when there is a single group (ratio).',
         type: 'number',
         required: false,
         flavors: allFlavors,
@@ -133,7 +194,7 @@ const props: ChartProperty[] = [
     },
     {
         key: 'innerPadding',
-        help: 'Padding between grouped/stacked bars.',
+        help: 'Padding between grouped boxplots.',
         type: 'number',
         required: false,
         flavors: allFlavors,
@@ -152,6 +213,32 @@ const props: ChartProperty[] = [
         flavors: allFlavors,
         defaultValue: svgDefaultProps.colors,
     }),
+    {
+        key: 'colorBy',
+        group: 'Style',
+        help: `How to assign individual colors, also impacts legends.`,
+        type: `'group' | 'subGroup'`,
+        flavors: allFlavors,
+        required: false,
+        defaultValue: svgDefaultProps.colorBy,
+        control: {
+            type: 'radio',
+            choices: [
+                { label: 'group', value: 'group' },
+                { label: 'subGroup', value: 'subGroup' },
+            ],
+        },
+    },
+    {
+        key: 'opacity',
+        help: 'Opacity.',
+        required: false,
+        defaultValue: svgDefaultProps.opacity,
+        type: 'number',
+        flavors: allFlavors,
+        control: { type: 'opacity' },
+        group: 'Style',
+    },
     {
         key: 'borderRadius',
         help: 'Interquartile Range box border radius.',
@@ -191,6 +278,27 @@ const props: ChartProperty[] = [
         group: 'Style',
         control: { type: 'inheritedColor' },
     },
+    {
+        key: 'medianWidth',
+        help: 'Median line width.',
+        type: 'number',
+        flavors: allFlavors,
+        required: false,
+        defaultValue: svgDefaultProps.medianWidth,
+        group: 'Style',
+        control: { type: 'lineWidth' },
+    },
+    {
+        key: 'medianColor',
+        help: 'Method to compute the median color.',
+        description: `[see dedicated documentation](self:/guides/colors).`,
+        type: 'string | object | Function',
+        flavors: allFlavors,
+        required: false,
+        defaultValue: svgDefaultProps.medianColor,
+        group: 'Style',
+        control: { type: 'inheritedColor' },
+    },
     {
         key: 'whiskerWidth',
         help: 'Whisker line width.',
@@ -235,13 +343,70 @@ const props: ChartProperty[] = [
         values: true,
     }),
     ...axes({ flavors: allFlavors }),
+    {
+        key: 'layers',
+        group: 'Customization',
+        help: 'Defines the order of layers and add custom layers.',
+        description: `
+            You can also use this to insert extra layers
+            in the chart, the extra layer should be a valid React component,
+            and will be passed to [\`createElement\`](https://react.dev/reference/react/createElement).
+            
+            It will receive the chart's context & computed data
+            and must return a valid SVG element.
+        `,
+        flavors: allFlavors,
+        required: false,
+        type: 'Array<string | Function>',
+        defaultValue: svgDefaultProps.layers,
+    },
+    {
+        key: 'boxPlotComponent',
+        group: 'Customization',
+        help: 'Override the default box plot component.',
+        required: false,
+        type: 'React.FC<BoxPlotItemProps<RawDatum>>',
+    },
     isInteractive({
         flavors: ['svg'],
         defaultValue: svgDefaultProps.isInteractive,
     }),
+    {
+        key: 'activeOpacity',
+        help: 'Opacity when active.',
+        required: false,
+        defaultValue: svgDefaultProps.activeOpacity,
+        type: 'number',
+        flavors: allFlavors,
+        control: { type: 'opacity' },
+        group: 'Interactivity',
+    },
+    {
+        key: 'inactiveOpacity',
+        help: 'Opacity when inactive.',
+        required: false,
+        defaultValue: svgDefaultProps.inactiveOpacity,
+        type: 'number',
+        flavors: allFlavors,
+        control: { type: 'opacity' },
+        group: 'Interactivity',
+    },
+    {
+        key: 'tooltip',
+        flavors: allFlavors,
+        group: 'Interactivity',
+        type: 'Function',
+        required: false,
+        help: 'Tooltip custom component',
+        description: `
+            A function allowing complete tooltip customisation,
+            it must return a valid HTML element and will receive
+            the boxplot summary.
+        `,
+    },
     {
         key: 'legends',
-        flavors: ['svg', 'canvas'],
+        flavors: allFlavors,
         type: 'object[]',
         help: `Optional chart's legends.`,
         group: 'Legends',
@@ -274,6 +439,39 @@ const props: ChartProperty[] = [
     },
     ...motionProperties(['svg'], svgDefaultProps, 'react-spring'),
     ...commonAccessibilityProps(['svg']),
+    {
+        key: 'isFocusable',
+        flavors: ['svg'],
+        required: false,
+        group: 'Accessibility',
+        help: 'Make the root SVG element and each boxplot item focusable, for keyboard navigation.',
+        type: 'boolean',
+        control: { type: 'switch' },
+    },
+    {
+        key: 'boxPlotAriaLabel',
+        flavors: ['svg'],
+        required: false,
+        group: 'Accessibility',
+        help: '[aria-label](https://www.w3.org/TR/wai-aria/#aria-label) for boxplot items.',
+        type: '(data) => string',
+    },
+    {
+        key: 'boxPlotAriaLabelledBy',
+        flavors: ['svg'],
+        required: false,
+        group: 'Accessibility',
+        help: '[aria-labelledby](https://www.w3.org/TR/wai-aria/#aria-labelledby) for boxplot items.',
+        type: '(data) => string',
+    },
+    {
+        key: 'boxPlotAriaDescribedBy',
+        flavors: ['svg'],
+        required: false,
+        group: 'Accessibility',
+        help: '[aria-describedby](https://www.w3.org/TR/wai-aria/#aria-describedby) for boxplot items.',
+        type: '(data) => string',
+    },
 ]
 
 export const groups = groupProperties(props)
diff --git a/website/src/pages/boxplot/index.tsx b/website/src/pages/boxplot/index.tsx
index 46824297f..fdcf9e15d 100644
--- a/website/src/pages/boxplot/index.tsx
+++ b/website/src/pages/boxplot/index.tsx
@@ -1,33 +1,23 @@
 import React from 'react'
-import { generateBoxPlotData } from '@nivo/generators'
 import { ResponsiveBoxPlot, svgDefaultProps } from '@nivo/boxplot'
 import { ComponentTemplate } from '../../components/components/ComponentTemplate'
 import meta from '../../data/components/boxplot/meta.yml'
-import mapper from '../../data/components/chord/mapper'
+import mapper from '../../data/components/boxplot/mapper'
+import { generateLightDataSet } from '../../data/components/boxplot/generator'
 import { groups } from '../../data/components/boxplot/props'
 import { graphql, useStaticQuery } from 'gatsby'
 
-const generateData = () => generateBoxPlotData([
-    { group: 'Alpha', subgroup: 'A', mu: 5, sd: 1, n: 20 },
-    { group: 'Alpha', subgroup: 'B', mu: 6, sd: 1, n: 20 },
-    { group: 'Beta', subgroup: 'A', mu: 8, sd: 1.4, n: 20 },
-    { group: 'Beta', subgroup: 'B', mu: 7.5, sd: 1.4, n: 20 },
-    { group: 'Gamma', subgroup: 'A', mu: 5, sd: 1, n: 20 },
-    { group: 'Gamma', subgroup: 'B', mu: 7.2, sd: 1.8, n: 20 },
-    { group: 'Delta', subgroup: 'A', mu: 5, sd: 1, n: 20 },
-    { group: 'Delta', subgroup: 'B', mu: 6, sd: 1, n: 20 },
-    { group: 'Epsilon', subgroup: 'A', mu: 5, sd: 1.4, n: 20 },
-    { group: 'Epsilon', subgroup: 'B', mu: 6, sd: 1.8, n: 20 },
-])
-
 const initialProperties = {
     margin: {
         top: 60,
-        right: 60,
-        bottom: 90,
+        right: 140,
+        bottom: 60,
         left: 60,
     },
 
+    value: svgDefaultProps.value,
+    minValue: 0,
+    maxValue: 10,
     groupBy: 'group',
     subGroupBy: 'subgroup',
     quantiles: svgDefaultProps.quantiles,
@@ -35,14 +25,12 @@ const initialProperties = {
     padding: 0.12,
     innerPadding: 6,
 
-    minValue: 0,
-    maxValue: 10,
     valueFormat: '.2f',
 
     enableGridX: true,
     enableGridY: true,
     axisTop: {
-        enable: false,
+        enable: true,
         tickSize: 5,
         tickPadding: 5,
         tickRotation: 0,
@@ -50,7 +38,7 @@ const initialProperties = {
         legendOffset: 36,
     },
     axisRight: {
-        enable: false,
+        enable: true,
         tickSize: 5,
         tickPadding: 5,
         tickRotation: 0,
@@ -62,7 +50,7 @@ const initialProperties = {
         tickSize: 5,
         tickPadding: 5,
         tickRotation: 0,
-        legend: 'country',
+        legend: 'group',
         legendPosition: 'middle',
         legendOffset: 32,
     },
@@ -71,23 +59,16 @@ const initialProperties = {
         tickSize: 5,
         tickPadding: 5,
         tickRotation: 0,
-        legend: 'food',
+        legend: 'value',
         legendPosition: 'middle',
         legendOffset: -40,
     },
 
-    enableLabel: true,
-    label: 'id',
-    labelOffset: 12,
-    labelRotation: -90,
-    labelTextColor: {
-        from: 'color',
-        modifiers: [['darker', 1]],
-    },
-
     colors: { scheme: 'nivo' },
+    colorBy: svgDefaultProps.colorBy,
+    opacity: svgDefaultProps.opacity,
     borderRadius: 2,
-    borderWidth: svgDefaultProps.borderWidth,
+    borderWidth: 2,
     borderColor: {
         from: 'color',
         modifiers: [['darker', 0.3]],
@@ -95,34 +76,38 @@ const initialProperties = {
     medianWidth: 2,
     medianColor: {
         from: 'color',
-        modifiers: [['darker', 0.8]],
+        modifiers: [['darker', 0.3]],
     },
     whiskerWidth: svgDefaultProps.whiskerWidth,
     whiskerEndSize: 0.6,
     whiskerColor: {
         from: 'color',
-        modifiers: [['darker', 0]],
+        modifiers: [['darker', 0.3]],
     },
 
     isInteractive: true,
+    activeOpacity: svgDefaultProps.activeOpacity,
+    inactiveOpacity: svgDefaultProps.inactiveOpacity,
 
     animate: true,
     motionConfig: 'stiff',
 
+    isFocusable: svgDefaultProps.isFocusable,
+
     legends: [
         {
-            anchor: 'bottom',
-            direction: 'row',
+            anchor: 'right',
+            direction: 'column',
             justify: false,
-            translateX: 0,
-            translateY: 70,
-            itemWidth: 80,
-            itemHeight: 14,
-            itemsSpacing: 0,
+            translateX: 100,
+            translateY: 0,
+            itemWidth: 60,
+            itemHeight: 20,
+            itemsSpacing: 3,
             itemTextColor: '#999',
             itemDirection: 'left-to-right',
-            symbolSize: 12,
-            symbolShape: 'circle',
+            symbolSize: 20,
+            symbolShape: 'square',
             onClick: d => {
                 alert(JSON.stringify(d, null, '    '))
             },
@@ -164,11 +149,7 @@ const BoxPlot = () => {
             initialProperties={initialProperties}
             defaultProperties={svgDefaultProps}
             propertiesMapper={mapper}
-            codePropertiesMapper={(properties, data) => ({
-                keys: data.keys,
-                ...properties,
-            })}
-            generateData={generateData}
+            generateData={generateLightDataSet}
             getTabData={data => data}
             image={image}
         >
@@ -178,41 +159,6 @@ const BoxPlot = () => {
                         data={data}
                         {...properties}
                         theme={theme}
-                        // groupBy={}
-                        // groups={}
-                        // value={}
-                        // maxValue={}
-                        // minValue={}
-                        // opacity={}
-                        // activeOpacity={}
-                        // inactiveOpacity={}
-                        // valueScale={}
-                        // indexScale={}
-                        // enableGridX={}
-                        // enableGridY={}
-                        // medianColor={}
-                        // medianWidth={}
-                        // whiskerColor={}
-                        // tooltip={}
-                        // tooltipLabel={}
-                        // colorBy={}
-                        // colors={}
-                        // theme={}
-                        // annotations={}
-                        // legends={}
-                        // data={}
-                        // height={}
-                        // width={}
-                        // animate={}
-                        // motionConfig={}
-                        // axisBottom={}
-                        // axisLeft={}
-                        // axisRight={}
-                        // axisTop={}
-                        // boxPlotComponent={}
-                        // markers={}
-                        // layers={}
-                        // role={}
                         onClick={boxPlot => {
                             logAction({
                                 type: 'click',
diff --git a/website/src/styles/icons.css b/website/src/styles/icons.css
index 50ed8c9dc..91ed46303 100644
--- a/website/src/styles/icons.css
+++ b/website/src/styles/icons.css
@@ -1,5 +1,5 @@
 /* glue: 0.13 hash: 78b58a59dc */
-        .sprite-icons-waffle-light-neutral,
+.sprite-icons-waffle-light-neutral,
 .sprite-icons-waffle-light-colored,
 .sprite-icons-waffle-dark-neutral,
 .sprite-icons-waffle-dark-colored,
@@ -128,786 +128,790 @@
 .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-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-radial-bar-light-neutral {
-            background-position: -124px -364px;
-            width: 52px;
-            height: 52px;
-        }
-        
-        .sprite-icons-radial-bar-light-colored {
-            background-position: -184px -364px;
-            width: 52px;
-            height: 52px;
-        }
-        
-        .sprite-icons-radial-bar-dark-neutral {
-            background-position: -244px -364px;
-            width: 52px;
-            height: 52px;
-        }
-        
-        .sprite-icons-radial-bar-dark-colored {
-            background-position: -304px -364px;
-            width: 52px;
-            height: 52px;
-        }
-        
-        .sprite-icons-radar-light-neutral {
-            background-position: -364px -364px;
-            width: 52px;
-            height: 52px;
-        }
-        
-        .sprite-icons-radar-light-colored {
-            background-position: -424px -4px;
-            width: 52px;
-            height: 52px;
-        }
-        
-        .sprite-icons-radar-dark-neutral {
-            background-position: -424px -64px;
-            width: 52px;
-            height: 52px;
-        }
-        
-        .sprite-icons-radar-dark-colored {
-            background-position: -424px -124px;
-            width: 52px;
-            height: 52px;
-        }
-        
-        .sprite-icons-pie-light-neutral {
-            background-position: -424px -184px;
-            width: 52px;
-            height: 52px;
-        }
-        
-        .sprite-icons-pie-light-colored {
-            background-position: -424px -244px;
-            width: 52px;
-            height: 52px;
-        }
-        
-        .sprite-icons-pie-dark-neutral {
-            background-position: -424px -304px;
-            width: 52px;
-            height: 52px;
-        }
-        
-        .sprite-icons-pie-dark-colored {
-            background-position: -424px -364px;
-            width: 52px;
-            height: 52px;
-        }
-        
-        .sprite-icons-parallel-coordinates-light-neutral {
-            background-position: -4px -424px;
-            width: 52px;
-            height: 52px;
-        }
-        
-        .sprite-icons-parallel-coordinates-light-colored {
-            background-position: -64px -424px;
-            width: 52px;
-            height: 52px;
-        }
-        
-        .sprite-icons-parallel-coordinates-dark-neutral {
-            background-position: -124px -424px;
-            width: 52px;
-            height: 52px;
-        }
-        
-        .sprite-icons-parallel-coordinates-dark-colored {
-            background-position: -184px -424px;
-            width: 52px;
-            height: 52px;
-        }
-        
-        .sprite-icons-nivo-icon {
-            background-position: -244px -424px;
-            width: 52px;
-            height: 52px;
-        }
-        
-        .sprite-icons-network-light-neutral {
-            background-position: -304px -424px;
-            width: 52px;
-            height: 52px;
-        }
-        
-        .sprite-icons-network-light-colored {
-            background-position: -364px -424px;
-            width: 52px;
-            height: 52px;
-        }
-        
-        .sprite-icons-network-dark-neutral {
-            background-position: -424px -424px;
-            width: 52px;
-            height: 52px;
-        }
-        
-        .sprite-icons-network-dark-colored {
-            background-position: -484px -4px;
-            width: 52px;
-            height: 52px;
-        }
-        
-        .sprite-icons-marimekko-light-neutral {
-            background-position: -484px -64px;
-            width: 52px;
-            height: 52px;
-        }
-        
-        .sprite-icons-marimekko-light-colored {
-            background-position: -484px -124px;
-            width: 52px;
-            height: 52px;
-        }
-        
-        .sprite-icons-marimekko-dark-neutral {
-            background-position: -484px -184px;
-            width: 52px;
-            height: 52px;
-        }
-        
-        .sprite-icons-marimekko-dark-colored {
-            background-position: -484px -244px;
-            width: 52px;
-            height: 52px;
-        }
-        
-        .sprite-icons-line-light-neutral {
-            background-position: -484px -304px;
-            width: 52px;
-            height: 52px;
-        }
-        
-        .sprite-icons-line-light-colored {
-            background-position: -484px -364px;
-            width: 52px;
-            height: 52px;
-        }
-        
-        .sprite-icons-line-dark-neutral {
-            background-position: -484px -424px;
-            width: 52px;
-            height: 52px;
-        }
-        
-        .sprite-icons-line-dark-colored {
-            background-position: -4px -484px;
-            width: 52px;
-            height: 52px;
-        }
-        
-        .sprite-icons-heatmap-light-neutral {
-            background-position: -64px -484px;
-            width: 52px;
-            height: 52px;
-        }
-        
-        .sprite-icons-heatmap-light-colored {
-            background-position: -124px -484px;
-            width: 52px;
-            height: 52px;
-        }
-        
-        .sprite-icons-heatmap-dark-neutral {
-            background-position: -184px -484px;
-            width: 52px;
-            height: 52px;
-        }
-        
-        .sprite-icons-heatmap-dark-colored {
-            background-position: -244px -484px;
-            width: 52px;
-            height: 52px;
-        }
-        
-        .sprite-icons-geomap-light-neutral {
-            background-position: -304px -484px;
-            width: 52px;
-            height: 52px;
-        }
-        
-        .sprite-icons-geomap-light-colored {
-            background-position: -364px -484px;
-            width: 52px;
-            height: 52px;
-        }
-        
-        .sprite-icons-geomap-dark-neutral {
-            background-position: -424px -484px;
-            width: 52px;
-            height: 52px;
-        }
-        
-        .sprite-icons-geomap-dark-colored {
-            background-position: -484px -484px;
-            width: 52px;
-            height: 52px;
-        }
-        
-        .sprite-icons-funnel-light-neutral {
-            background-position: -544px -4px;
-            width: 52px;
-            height: 52px;
-        }
-        
-        .sprite-icons-funnel-light-colored {
-            background-position: -544px -64px;
-            width: 52px;
-            height: 52px;
-        }
-        
-        .sprite-icons-funnel-dark-neutral {
-            background-position: -544px -124px;
-            width: 52px;
-            height: 52px;
-        }
-        
-        .sprite-icons-funnel-dark-colored {
-            background-position: -544px -184px;
-            width: 52px;
-            height: 52px;
-        }
-        
-        .sprite-icons-data-light-neutral {
-            background-position: -544px -244px;
-            width: 52px;
-            height: 52px;
-        }
-        
-        .sprite-icons-data-light-colored {
-            background-position: -544px -304px;
-            width: 52px;
-            height: 52px;
-        }
-        
-        .sprite-icons-data-dark-neutral {
-            background-position: -544px -364px;
-            width: 52px;
-            height: 52px;
-        }
-        
-        .sprite-icons-data-dark-colored {
-            background-position: -544px -424px;
-            width: 52px;
-            height: 52px;
-        }
-        
-        .sprite-icons-code-light-neutral {
-            background-position: -544px -484px;
-            width: 52px;
-            height: 52px;
-        }
-        
-        .sprite-icons-code-light-colored {
-            background-position: -4px -544px;
-            width: 52px;
-            height: 52px;
-        }
-        
-        .sprite-icons-code-dark-neutral {
-            background-position: -64px -544px;
-            width: 52px;
-            height: 52px;
-        }
-        
-        .sprite-icons-code-dark-colored {
-            background-position: -124px -544px;
-            width: 52px;
-            height: 52px;
-        }
-        
-        .sprite-icons-circle-packing-light-neutral {
-            background-position: -184px -544px;
-            width: 52px;
-            height: 52px;
-        }
-        
-        .sprite-icons-circle-packing-light-colored {
-            background-position: -244px -544px;
-            width: 52px;
-            height: 52px;
-        }
-        
-        .sprite-icons-circle-packing-dark-neutral {
-            background-position: -304px -544px;
-            width: 52px;
-            height: 52px;
-        }
-        
-        .sprite-icons-circle-packing-dark-colored {
-            background-position: -364px -544px;
-            width: 52px;
-            height: 52px;
-        }
-        
-        .sprite-icons-choropleth-light-neutral {
-            background-position: -424px -544px;
-            width: 52px;
-            height: 52px;
-        }
-        
-        .sprite-icons-choropleth-light-colored {
-            background-position: -484px -544px;
-            width: 52px;
-            height: 52px;
-        }
-        
-        .sprite-icons-choropleth-dark-neutral {
-            background-position: -544px -544px;
-            width: 52px;
-            height: 52px;
-        }
-        
-        .sprite-icons-choropleth-dark-colored {
-            background-position: -604px -4px;
-            width: 52px;
-            height: 52px;
-        }
-        
-        .sprite-icons-chord-light-neutral {
-            background-position: -604px -64px;
-            width: 52px;
-            height: 52px;
-        }
-        
-        .sprite-icons-chord-light-colored {
-            background-position: -604px -124px;
-            width: 52px;
-            height: 52px;
-        }
-        
-        .sprite-icons-chord-dark-neutral {
-            background-position: -604px -184px;
-            width: 52px;
-            height: 52px;
-        }
-        
-        .sprite-icons-chord-dark-colored {
-            background-position: -604px -244px;
-            width: 52px;
-            height: 52px;
-        }
-        
-        .sprite-icons-calendar-light-neutral {
-            background-position: -604px -304px;
-            width: 52px;
-            height: 52px;
-        }
-        
-        .sprite-icons-calendar-light-colored {
-            background-position: -604px -364px;
-            width: 52px;
-            height: 52px;
-        }
-        
-        .sprite-icons-calendar-dark-neutral {
-            background-position: -604px -424px;
-            width: 52px;
-            height: 52px;
-        }
-        
-        .sprite-icons-calendar-dark-colored {
-            background-position: -604px -484px;
-            width: 52px;
-            height: 52px;
-        }
-        
-        .sprite-icons-bump-light-neutral {
-            background-position: -604px -544px;
-            width: 52px;
-            height: 52px;
-        }
-        
-        .sprite-icons-bump-light-colored {
-            background-position: -4px -604px;
-            width: 52px;
-            height: 52px;
-        }
-        
-        .sprite-icons-bump-dark-neutral {
-            background-position: -64px -604px;
-            width: 52px;
-            height: 52px;
-        }
-        
-        .sprite-icons-bump-dark-colored {
-            background-position: -124px -604px;
-            width: 52px;
-            height: 52px;
-        }
-        
-        .sprite-icons-bullet-light-neutral {
-            background-position: -184px -604px;
-            width: 52px;
-            height: 52px;
-        }
-        
-        .sprite-icons-bullet-light-colored {
-            background-position: -244px -604px;
-            width: 52px;
-            height: 52px;
-        }
-        
-        .sprite-icons-bullet-dark-neutral {
-            background-position: -304px -604px;
-            width: 52px;
-            height: 52px;
-        }
-        
-        .sprite-icons-bullet-dark-colored {
-            background-position: -364px -604px;
-            width: 52px;
-            height: 52px;
-        }
-        
-        .sprite-icons-boxplot-light-neutral {
-            background-position: -424px -604px;
-            width: 52px;
-            height: 52px;
-        }
-        
-        .sprite-icons-boxplot-light-colored {
-            background-position: -484px -604px;
-            width: 52px;
-            height: 52px;
-        }
-        
-        .sprite-icons-boxplot-dark-neutral {
-            background-position: -544px -604px;
-            width: 52px;
-            height: 52px;
-        }
-        
-        .sprite-icons-boxplot-dark-colored {
-            background-position: -604px -604px;
-            width: 52px;
-            height: 52px;
-        }
-        
-        .sprite-icons-bar-light-neutral {
-            background-position: -664px -4px;
-            width: 52px;
-            height: 52px;
-        }
-        
-        .sprite-icons-bar-light-colored {
-            background-position: -664px -64px;
-            width: 52px;
-            height: 52px;
-        }
-        
-        .sprite-icons-bar-dark-neutral {
-            background-position: -664px -124px;
-            width: 52px;
-            height: 52px;
-        }
-        
-        .sprite-icons-bar-dark-colored {
-            background-position: -664px -184px;
-            width: 52px;
-            height: 52px;
-        }
-        
-        .sprite-icons-area-bump-light-neutral {
-            background-position: -664px -244px;
-            width: 52px;
-            height: 52px;
-        }
-        
-        .sprite-icons-area-bump-light-colored {
-            background-position: -664px -304px;
-            width: 52px;
-            height: 52px;
-        }
-        
-        .sprite-icons-area-bump-dark-neutral {
-            background-position: -664px -364px;
-            width: 52px;
-            height: 52px;
-        }
-        
-        .sprite-icons-area-bump-dark-colored {
-            background-position: -664px -424px;
-            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,
+    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-radial-bar-light-neutral {
+    background-position: -124px -364px;
+    width: 52px;
+    height: 52px;
+}
+
+.sprite-icons-radial-bar-light-colored {
+    background-position: -184px -364px;
+    width: 52px;
+    height: 52px;
+}
+
+.sprite-icons-radial-bar-dark-neutral {
+    background-position: -244px -364px;
+    width: 52px;
+    height: 52px;
+}
+
+.sprite-icons-radial-bar-dark-colored {
+    background-position: -304px -364px;
+    width: 52px;
+    height: 52px;
+}
+
+.sprite-icons-radar-light-neutral {
+    background-position: -364px -364px;
+    width: 52px;
+    height: 52px;
+}
+
+.sprite-icons-radar-light-colored {
+    background-position: -424px -4px;
+    width: 52px;
+    height: 52px;
+}
+
+.sprite-icons-radar-dark-neutral {
+    background-position: -424px -64px;
+    width: 52px;
+    height: 52px;
+}
+
+.sprite-icons-radar-dark-colored {
+    background-position: -424px -124px;
+    width: 52px;
+    height: 52px;
+}
+
+.sprite-icons-pie-light-neutral {
+    background-position: -424px -184px;
+    width: 52px;
+    height: 52px;
+}
+
+.sprite-icons-pie-light-colored {
+    background-position: -424px -244px;
+    width: 52px;
+    height: 52px;
+}
+
+.sprite-icons-pie-dark-neutral {
+    background-position: -424px -304px;
+    width: 52px;
+    height: 52px;
+}
+
+.sprite-icons-pie-dark-colored {
+    background-position: -424px -364px;
+    width: 52px;
+    height: 52px;
+}
+
+.sprite-icons-parallel-coordinates-light-neutral {
+    background-position: -4px -424px;
+    width: 52px;
+    height: 52px;
+}
+
+.sprite-icons-parallel-coordinates-light-colored {
+    background-position: -64px -424px;
+    width: 52px;
+    height: 52px;
+}
+
+.sprite-icons-parallel-coordinates-dark-neutral {
+    background-position: -124px -424px;
+    width: 52px;
+    height: 52px;
+}
+
+.sprite-icons-parallel-coordinates-dark-colored {
+    background-position: -184px -424px;
+    width: 52px;
+    height: 52px;
+}
+
+.sprite-icons-nivo-icon {
+    background-position: -244px -424px;
+    width: 52px;
+    height: 52px;
+}
+
+.sprite-icons-network-light-neutral {
+    background-position: -304px -424px;
+    width: 52px;
+    height: 52px;
+}
+
+.sprite-icons-network-light-colored {
+    background-position: -364px -424px;
+    width: 52px;
+    height: 52px;
+}
+
+.sprite-icons-network-dark-neutral {
+    background-position: -424px -424px;
+    width: 52px;
+    height: 52px;
+}
+
+.sprite-icons-network-dark-colored {
+    background-position: -484px -4px;
+    width: 52px;
+    height: 52px;
+}
+
+.sprite-icons-marimekko-light-neutral {
+    background-position: -484px -64px;
+    width: 52px;
+    height: 52px;
+}
+
+.sprite-icons-marimekko-light-colored {
+    background-position: -484px -124px;
+    width: 52px;
+    height: 52px;
+}
+
+.sprite-icons-marimekko-dark-neutral {
+    background-position: -484px -184px;
+    width: 52px;
+    height: 52px;
+}
+
+.sprite-icons-marimekko-dark-colored {
+    background-position: -484px -244px;
+    width: 52px;
+    height: 52px;
+}
+
+.sprite-icons-line-light-neutral {
+    background-position: -484px -304px;
+    width: 52px;
+    height: 52px;
+}
+
+.sprite-icons-line-light-colored {
+    background-position: -484px -364px;
+    width: 52px;
+    height: 52px;
+}
+
+.sprite-icons-line-dark-neutral {
+    background-position: -484px -424px;
+    width: 52px;
+    height: 52px;
+}
+
+.sprite-icons-line-dark-colored {
+    background-position: -4px -484px;
+    width: 52px;
+    height: 52px;
+}
+
+.sprite-icons-heatmap-light-neutral {
+    background-position: -64px -484px;
+    width: 52px;
+    height: 52px;
+}
+
+.sprite-icons-heatmap-light-colored {
+    background-position: -124px -484px;
+    width: 52px;
+    height: 52px;
+}
+
+.sprite-icons-heatmap-dark-neutral {
+    background-position: -184px -484px;
+    width: 52px;
+    height: 52px;
+}
+
+.sprite-icons-heatmap-dark-colored {
+    background-position: -244px -484px;
+    width: 52px;
+    height: 52px;
+}
+
+.sprite-icons-geomap-light-neutral {
+    background-position: -304px -484px;
+    width: 52px;
+    height: 52px;
+}
+
+.sprite-icons-geomap-light-colored {
+    background-position: -364px -484px;
+    width: 52px;
+    height: 52px;
+}
+
+.sprite-icons-geomap-dark-neutral {
+    background-position: -424px -484px;
+    width: 52px;
+    height: 52px;
+}
+
+.sprite-icons-geomap-dark-colored {
+    background-position: -484px -484px;
+    width: 52px;
+    height: 52px;
+}
+
+.sprite-icons-funnel-light-neutral {
+    background-position: -544px -4px;
+    width: 52px;
+    height: 52px;
+}
+
+.sprite-icons-funnel-light-colored {
+    background-position: -544px -64px;
+    width: 52px;
+    height: 52px;
+}
+
+.sprite-icons-funnel-dark-neutral {
+    background-position: -544px -124px;
+    width: 52px;
+    height: 52px;
+}
+
+.sprite-icons-funnel-dark-colored {
+    background-position: -544px -184px;
+    width: 52px;
+    height: 52px;
+}
+
+.sprite-icons-data-light-neutral {
+    background-position: -544px -244px;
+    width: 52px;
+    height: 52px;
+}
+
+.sprite-icons-data-light-colored {
+    background-position: -544px -304px;
+    width: 52px;
+    height: 52px;
+}
+
+.sprite-icons-data-dark-neutral {
+    background-position: -544px -364px;
+    width: 52px;
+    height: 52px;
+}
+
+.sprite-icons-data-dark-colored {
+    background-position: -544px -424px;
+    width: 52px;
+    height: 52px;
+}
+
+.sprite-icons-code-light-neutral {
+    background-position: -544px -484px;
+    width: 52px;
+    height: 52px;
+}
+
+.sprite-icons-code-light-colored {
+    background-position: -4px -544px;
+    width: 52px;
+    height: 52px;
+}
+
+.sprite-icons-code-dark-neutral {
+    background-position: -64px -544px;
+    width: 52px;
+    height: 52px;
+}
+
+.sprite-icons-code-dark-colored {
+    background-position: -124px -544px;
+    width: 52px;
+    height: 52px;
+}
+
+.sprite-icons-circle-packing-light-neutral {
+    background-position: -184px -544px;
+    width: 52px;
+    height: 52px;
+}
+
+.sprite-icons-circle-packing-light-colored {
+    background-position: -244px -544px;
+    width: 52px;
+    height: 52px;
+}
+
+.sprite-icons-circle-packing-dark-neutral {
+    background-position: -304px -544px;
+    width: 52px;
+    height: 52px;
+}
+
+.sprite-icons-circle-packing-dark-colored {
+    background-position: -364px -544px;
+    width: 52px;
+    height: 52px;
+}
+
+.sprite-icons-choropleth-light-neutral {
+    background-position: -424px -544px;
+    width: 52px;
+    height: 52px;
+}
+
+.sprite-icons-choropleth-light-colored {
+    background-position: -484px -544px;
+    width: 52px;
+    height: 52px;
+}
+
+.sprite-icons-choropleth-dark-neutral {
+    background-position: -544px -544px;
+    width: 52px;
+    height: 52px;
+}
+
+.sprite-icons-choropleth-dark-colored {
+    background-position: -604px -4px;
+    width: 52px;
+    height: 52px;
+}
+
+.sprite-icons-chord-light-neutral {
+    background-position: -604px -64px;
+    width: 52px;
+    height: 52px;
+}
+
+.sprite-icons-chord-light-colored {
+    background-position: -604px -124px;
+    width: 52px;
+    height: 52px;
+}
+
+.sprite-icons-chord-dark-neutral {
+    background-position: -604px -184px;
+    width: 52px;
+    height: 52px;
+}
+
+.sprite-icons-chord-dark-colored {
+    background-position: -604px -244px;
+    width: 52px;
+    height: 52px;
+}
+
+.sprite-icons-calendar-light-neutral {
+    background-position: -604px -304px;
+    width: 52px;
+    height: 52px;
+}
+
+.sprite-icons-calendar-light-colored {
+    background-position: -604px -364px;
+    width: 52px;
+    height: 52px;
+}
+
+.sprite-icons-calendar-dark-neutral {
+    background-position: -604px -424px;
+    width: 52px;
+    height: 52px;
+}
+
+.sprite-icons-calendar-dark-colored {
+    background-position: -604px -484px;
+    width: 52px;
+    height: 52px;
+}
+
+.sprite-icons-bump-light-neutral {
+    background-position: -604px -544px;
+    width: 52px;
+    height: 52px;
+}
+
+.sprite-icons-bump-light-colored {
+    background-position: -4px -604px;
+    width: 52px;
+    height: 52px;
+}
+
+.sprite-icons-bump-dark-neutral {
+    background-position: -64px -604px;
+    width: 52px;
+    height: 52px;
+}
+
+.sprite-icons-bump-dark-colored {
+    background-position: -124px -604px;
+    width: 52px;
+    height: 52px;
+}
+
+.sprite-icons-bullet-light-neutral {
+    background-position: -184px -604px;
+    width: 52px;
+    height: 52px;
+}
+
+.sprite-icons-bullet-light-colored {
+    background-position: -244px -604px;
+    width: 52px;
+    height: 52px;
+}
+
+.sprite-icons-bullet-dark-neutral {
+    background-position: -304px -604px;
+    width: 52px;
+    height: 52px;
+}
+
+.sprite-icons-bullet-dark-colored {
+    background-position: -364px -604px;
+    width: 52px;
+    height: 52px;
+}
+
+.sprite-icons-boxplot-light-neutral {
+    background-position: -424px -604px;
+    width: 52px;
+    height: 52px;
+}
+
+.sprite-icons-boxplot-light-colored {
+    background-position: -484px -604px;
+    width: 52px;
+    height: 52px;
+}
+
+.sprite-icons-boxplot-dark-neutral {
+    background-position: -544px -604px;
+    width: 52px;
+    height: 52px;
+}
+
+.sprite-icons-boxplot-dark-colored {
+    background-position: -604px -604px;
+    width: 52px;
+    height: 52px;
+}
+
+.sprite-icons-bar-light-neutral {
+    background-position: -664px -4px;
+    width: 52px;
+    height: 52px;
+}
+
+.sprite-icons-bar-light-colored {
+    background-position: -664px -64px;
+    width: 52px;
+    height: 52px;
+}
+
+.sprite-icons-bar-dark-neutral {
+    background-position: -664px -124px;
+    width: 52px;
+    height: 52px;
+}
+
+.sprite-icons-bar-dark-colored {
+    background-position: -664px -184px;
+    width: 52px;
+    height: 52px;
+}
+
+.sprite-icons-area-bump-light-neutral {
+    background-position: -664px -244px;
+    width: 52px;
+    height: 52px;
+}
+
+.sprite-icons-area-bump-light-colored {
+    background-position: -664px -304px;
+    width: 52px;
+    height: 52px;
+}
+
+.sprite-icons-area-bump-dark-neutral {
+    background-position: -664px -364px;
+    width: 52px;
+    height: 52px;
+}
+
+.sprite-icons-area-bump-dark-colored {
+    background-position: -664px -424px;
+    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,
     .sprite-icons-waffle-light-colored,
     .sprite-icons-waffle-dark-neutral,
     .sprite-icons-waffle-dark-colored,
@@ -1036,15 +1040,19 @@
     .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: 720px 660px;
-                -moz-background-size: 720px 660px;
-                background-size: 720px 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,
+        background-image: url('../assets/icons.png');
+        -webkit-background-size: 720px 660px;
+        -moz-background-size: 720px 660px;
+        background-size: 720px 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,
     .sprite-icons-waffle-light-colored,
     .sprite-icons-waffle-dark-neutral,
     .sprite-icons-waffle-dark-colored,
@@ -1173,10 +1181,9 @@
     .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: 720px 660px;
-                -moz-background-size: 720px 660px;
-                background-size: 720px 660px;
-            }
-        }
-        
\ No newline at end of file
+        background-image: url('../assets/icons@2x.png');
+        -webkit-background-size: 720px 660px;
+        -moz-background-size: 720px 660px;
+        background-size: 720px 660px;
+    }
+}