diff --git a/src/Button/ZoomOutButton/ZoomOutButton.example.jsx b/src/Button/ZoomOutButton/ZoomOutButton.example.jsx
new file mode 100644
index 0000000000..eb8cb238be
--- /dev/null
+++ b/src/Button/ZoomOutButton/ZoomOutButton.example.jsx
@@ -0,0 +1,56 @@
+import React from 'react';
+import { render } from 'react-dom';
+
+import OlMap from 'ol/map';
+import OlView from 'ol/view';
+import OlLayerTile from 'ol/layer/tile';
+import OlSourceOsm from 'ol/source/osm';
+import olProj from 'ol/proj';
+
+import {
+ ZoomOutButton
+} from '../../index.js';
+
+//
+// ***************************** SETUP *****************************************
+//
+const map = new OlMap({
+ layers: [
+ new OlLayerTile({
+ name: 'OSM',
+ source: new OlSourceOsm()
+ })
+ ],
+ view: new OlView({
+ center: olProj.fromLonLat([37.40570, 8.81566]),
+ zoom: 19
+ })
+});
+
+//
+// ***************************** SETUP END *************************************
+//
+
+render(
+
+
+
+
+ Zoom out button:
+
+ Zoom out (-)
+
+
+
+
,
+
+ // Target
+ document.getElementById('exampleContainer'),
+
+ // Callback
+ () => {
+ map.setTarget('map');
+ }
+);
diff --git a/src/Button/ZoomOutButton/ZoomOutButton.example.md b/src/Button/ZoomOutButton/ZoomOutButton.example.md
new file mode 100644
index 0000000000..a78d537da5
--- /dev/null
+++ b/src/Button/ZoomOutButton/ZoomOutButton.example.md
@@ -0,0 +1,8 @@
+---
+layout: basic.hbs
+title: ZoomOutButton example
+description: This is an example using `ZoomOutButton`
+collection: Examples
+---
+
+This example demonstrates the use of the `ZoomOutButton`.
diff --git a/src/Button/ZoomOutButton/ZoomOutButton.jsx b/src/Button/ZoomOutButton/ZoomOutButton.jsx
new file mode 100644
index 0000000000..aad55c9322
--- /dev/null
+++ b/src/Button/ZoomOutButton/ZoomOutButton.jsx
@@ -0,0 +1,76 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import OlMap from 'ol/map';
+
+import {
+ SimpleButton
+} from '../../index';
+
+/**
+ * Class representing a zoom out button.
+ *
+ * @class The ZoomOutButton
+ * @extends React.Component
+ */
+class ZoomOutButton extends React.Component {
+
+ /**
+ * The className added to this component.
+ * @type {String}
+ * @private
+ */
+ className = 'react-geo-zoomoutbutton'
+
+ static propTypes = {
+ /**
+ * The className which should be added.
+ * @type {String}
+ */
+ className: PropTypes.string,
+
+ /**
+ * Instance of OL map this component is bound to.
+ *
+ * @type {OlMap}
+ */
+ map: PropTypes.instanceOf(OlMap).isRequired,
+ }
+
+ /**
+ * Called when the button is clicked.
+ *
+ * @method
+ */
+ onClick = () => {
+ const map = this.props.map;
+ const view = map.getView();
+ const currentZoom = view.getZoom();
+
+ view.setZoom(currentZoom - 1);
+ }
+
+ /**
+ * The render function.
+ */
+ render() {
+ const {
+ className,
+ ...passThroughProps
+ } = this.props;
+
+ const finalClassName = className
+ ? `${className} ${this.className}`
+ : this.className;
+
+ return (
+
+ );
+ }
+}
+
+export default ZoomOutButton;
diff --git a/src/Button/ZoomOutButton/ZoomOutButton.spec.jsx b/src/Button/ZoomOutButton/ZoomOutButton.spec.jsx
new file mode 100644
index 0000000000..cf9e8173fd
--- /dev/null
+++ b/src/Button/ZoomOutButton/ZoomOutButton.spec.jsx
@@ -0,0 +1,36 @@
+/*eslint-env jest*/
+
+import TestUtil from '../../Util/TestUtil';
+
+import { ZoomOutButton } from '../../index';
+
+describe('', () => {
+
+ let map;
+
+ beforeEach(() => {
+ map = TestUtil.createMap();
+ });
+
+ it('is defined', () => {
+ expect(ZoomOutButton).not.toBeUndefined();
+ });
+
+ it('can be rendered', () => {
+ const wrapper = TestUtil.mountComponent(ZoomOutButton);
+ expect(wrapper).not.toBeUndefined();
+ });
+
+ it('zooms out when clicked', () => {
+ const wrapper = TestUtil.mountComponent(ZoomOutButton, {map});
+
+ const initialZoom = map.getView().getZoom();
+
+ wrapper.instance().onClick();
+
+ const newZoom = map.getView().getZoom();
+
+ expect(newZoom).toBe(initialZoom - 1);
+ });
+
+});
diff --git a/src/index.js b/src/index.js
index 082d936eeb..e94c3c30b2 100644
--- a/src/index.js
+++ b/src/index.js
@@ -6,6 +6,7 @@ import ToggleGroup from './Button/ToggleGroup/ToggleGroup.jsx';
import MeasureButton from './Button/MeasureButton/MeasureButton.jsx';
import DigitizeButton from './Button/DigitizeButton/DigitizeButton.jsx';
import ZoomInButton from './Button/ZoomInButton/ZoomInButton.jsx';
+import ZoomOutButton from './Button/ZoomOutButton/ZoomOutButton.jsx';
import CoordinateReferenceSystemCombo from './Field/CoordinateReferenceSystemCombo/CoordinateReferenceSystemCombo.jsx';
import NominatimSearch from './Field/NominatimSearch/NominatimSearch.jsx';
import ScaleCombo from './Field/ScaleCombo/ScaleCombo.jsx';
@@ -55,6 +56,7 @@ export {
MeasureButton,
DigitizeButton,
ZoomInButton,
+ ZoomOutButton,
LayerTree,
LayerTreeNode,
Legend,
diff --git a/webpack.examples.common.config.js b/webpack.examples.common.config.js
index f2143cca45..9bec62b642 100644
--- a/webpack.examples.common.config.js
+++ b/webpack.examples.common.config.js
@@ -12,6 +12,7 @@ const config = {
'Button/DigitizeButton/DigitizeButton': './src/Button/DigitizeButton/DigitizeButton.example.jsx',
'Button/UploadButton/UploadButton': './src/Button/UploadButton/UploadButton.example.jsx',
'Button/ZoomInButton/ZoomInButton': './src/Button/ZoomInButton/ZoomInButton.example.jsx',
+ 'Button/ZoomOutButton/ZoomOutButton': './src/Button/ZoomOutButton/ZoomOutButton.example.jsx',
'CircleMenu/CircleMenu': './src/CircleMenu/CircleMenu.example.jsx',
'Field/CoordinateReferenceSystemCombo/CoordinateReferenceSystemCombo': './src/Field/CoordinateReferenceSystemCombo/CoordinateReferenceSystemCombo.example.jsx',
'Field/NominatimSearch/NominatimSearch': './src/Field/NominatimSearch/NominatimSearch.example.jsx',