diff --git a/docs/src/pages/lab/slider/CustomIconSlider.js b/docs/src/pages/lab/slider/CustomIconSlider.js
new file mode 100644
index 00000000000000..913f6393fc173f
--- /dev/null
+++ b/docs/src/pages/lab/slider/CustomIconSlider.js
@@ -0,0 +1,54 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography';
+import Slider from '@material-ui/lab/Slider';
+import DeleteIcon from '@material-ui/icons/Delete';
+
+const styles = {
+  root: {
+    width: 300,
+  },
+};
+
+class CustomIconSlider extends React.Component {
+  state = {
+    value: 50,
+  };
+
+  handleChange = (event, value) => {
+    this.setState({ value });
+  };
+
+  render() {
+    const { classes } = this.props;
+    const { value } = this.state;
+
+    return (
+      <div className={classes.root}>
+        <Typography id="label">Slider Image</Typography>
+        <Slider
+          value={value}
+          aria-labelledby="label"
+          onChange={this.handleChange}
+          thumb={<img src="/static/images/cards/live-from-space.jpg" alt="" />}
+        />
+        <Typography id="label">Slider Simple</Typography>
+        <Slider value={value} aria-labelledby="label" onChange={this.handleChange} />
+        <Typography id="label">Slider Icon</Typography>
+        <Slider
+          value={value}
+          aria-labelledby="label"
+          onChange={this.handleChange}
+          thumb={<DeleteIcon style={{ color: 'green' }} />}
+        />
+      </div>
+    );
+  }
+}
+
+CustomIconSlider.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(CustomIconSlider);
diff --git a/docs/src/pages/lab/slider/slider.md b/docs/src/pages/lab/slider/slider.md
index 7252aabf469c52..1171327d0d7e6d 100644
--- a/docs/src/pages/lab/slider/slider.md
+++ b/docs/src/pages/lab/slider/slider.md
@@ -38,3 +38,9 @@ Sliders reflect the current state of the settings they control.
 ## Reverse slider
 
 {{"demo": "pages/lab/slider/ReverseSlider.js"}}
+
+## Custom Icon slider
+
+If you want to have a custom thumb icon.
+
+{{"demo": "pages/lab/slider/CustomIconSlider.js"}}
diff --git a/packages/material-ui-lab/src/Slider/Slider.js b/packages/material-ui-lab/src/Slider/Slider.js
index 6371a2f38bdc3b..b837b71ddf0429 100644
--- a/packages/material-ui-lab/src/Slider/Slider.js
+++ b/packages/material-ui-lab/src/Slider/Slider.js
@@ -119,6 +119,16 @@ export const styles = theme => {
         height: 17,
       },
     },
+    /* Class applied to the thumb element if custom thumb icon provided` . */
+    thumbTransparent: {
+      backgroundColor: 'transparent',
+    },
+    thumbIcon: {
+      position: 'relative',
+      top: -6,
+      height: 26,
+      width: 'auto',
+    },
     /* Class applied to the root element to trigger JSS nested styles if `reverse={true}` . */
     reverse: {},
     /* Class applied to the track and thumb elements to trigger JSS nested styles if `disabled`. */
@@ -375,6 +385,7 @@ class Slider extends React.Component {
     const { currentState } = this.state;
     const {
       component: Component,
+      thumb: Thumb,
       classes,
       className: classNameProp,
       disabled,
@@ -418,14 +429,28 @@ class Slider extends React.Component {
       [classes.vertical]: vertical,
     });
 
-    const thumbClasses = classNames(classes.thumb, commonClasses);
-
     const trackProperty = vertical ? 'height' : 'width';
     const thumbProperty = vertical ? 'top' : 'left';
     const inlineTrackBeforeStyles = { [trackProperty]: this.calculateTrackBeforeStyles(percent) };
     const inlineTrackAfterStyles = { [trackProperty]: this.calculateTrackAfterStyles(percent) };
     const inlineThumbStyles = { [thumbProperty]: `${percent}%` };
 
+    /** Start Thumbnail Icon Logic Here */
+    const withIcon = !!Thumb;
+    const Thumbnail = withIcon
+      ? React.cloneElement(Thumb, {
+          ...Thumb.props,
+          className: `${classes.thumbIcon} ${Thumb.props.className || ''}`,
+        })
+      : null;
+    /** End Thumbnail Icon Logic Here */
+
+    const thumbClasses = classNames(
+      classes.thumb,
+      commonClasses,
+      `${withIcon ? classes.thumbTransparent : ''}`,
+    );
+
     return (
       <Component
         role="slider"
@@ -446,7 +471,7 @@ class Slider extends React.Component {
         <div className={containerClasses}>
           <div className={trackBeforeClasses} style={inlineTrackBeforeStyles} />
           <ButtonBase
-            className={thumbClasses}
+            className={classNames(thumbClasses)}
             disableRipple
             style={inlineThumbStyles}
             onBlur={this.handleBlur}
@@ -454,7 +479,9 @@ class Slider extends React.Component {
             onTouchStartCapture={this.handleTouchStart}
             onTouchMove={this.handleMouseMove}
             onFocusVisible={this.handleFocus}
-          />
+          >
+            {Thumbnail}
+          </ButtonBase>
           <div className={trackAfterClasses} style={inlineTrackAfterStyles} />
         </div>
       </Component>
@@ -515,6 +542,11 @@ Slider.propTypes = {
    * @ignore
    */
   theme: PropTypes.object.isRequired,
+  /**
+   * The component used for the slider icon.
+   * This is optional, if provided should be a react element.
+   */
+  thumb: PropTypes.element,
   /**
    * The value of the slider.
    */
diff --git a/pages/lab/slider.js b/pages/lab/slider.js
index d482fb6a00c97a..8fc025c880cc49 100644
--- a/pages/lab/slider.js
+++ b/pages/lab/slider.js
@@ -41,6 +41,13 @@ module.exports = require('fs')
           raw: preval`
 module.exports = require('fs')
   .readFileSync(require.resolve('docs/src/pages/lab/slider/ReverseSlider'), 'utf8')
+`,
+        },
+        'pages/lab/slider/CustomIconSlider.js': {
+          js: require('docs/src/pages/lab/slider/CustomIconSlider').default,
+          raw: preval`
+module.exports = require('fs')
+  .readFileSync(require.resolve('docs/src/pages/lab/slider/CustomIconSlider'), 'utf8')
 `,
         },
       }}