diff --git a/client/homebrew/brewRenderer/toolBar/toolBar.jsx b/client/homebrew/brewRenderer/toolBar/toolBar.jsx
index 4ef5ab211..07d6cfb70 100644
--- a/client/homebrew/brewRenderer/toolBar/toolBar.jsx
+++ b/client/homebrew/brewRenderer/toolBar/toolBar.jsx
@@ -3,6 +3,8 @@ const React = require('react');
 const { useState, useEffect } = React;
 const _ = require('lodash')
 
+import * as ZoomIcons from '../../../icons/icon-components/zoomIcons.jsx';
+
 const MAX_ZOOM = 300;
 const MIN_ZOOM = 10;
 
@@ -92,14 +94,14 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
 					className='tool'
 					onClick={()=>handleZoomChange(calculateZoom('fill'))}
 				>
-					toFill
+					<ZoomIcons.FitWidth title='Fit to Width' style={{ width: '1.5em' }} />
 				</button>
 				<button
 					id='zoom-to-fit'
 					className='tool'
 					onClick={()=>handleZoomChange(calculateZoom('fit'))}
 				>
-					toFit
+					<ZoomIcons.FitAll title='Zoom to Fit' style={{ width: '1.5em' }} />
 				</button>
 				<button
 					id='zoom-out'
diff --git a/client/icons/icon-components/zoomIcons.jsx b/client/icons/icon-components/zoomIcons.jsx
new file mode 100644
index 000000000..27aed8799
--- /dev/null
+++ b/client/icons/icon-components/zoomIcons.jsx
@@ -0,0 +1,46 @@
+import * as React from 'react';
+
+const FitAll = ({ title, titleId, ...props })=>(
+	<svg
+		xmlns='http://www.w3.org/2000/svg'
+		xmlSpace='preserve'
+		style={{
+			fillRule         : 'evenodd',
+			clipRule         : 'evenodd',
+			strokeLinejoin   : 'round',
+			strokeMiterlimit : 2,
+		}}
+		viewBox='0 0 100 100'
+		width='1em'
+		fill='currentColor'
+		aria-labelledby={titleId}
+		{...props}
+	>
+	  	{title ? <title id={titleId}>{title}</title> : null}
+		<path d='M45.46 54.54h-14.4v6.304a2.87 2.87 0 0 1-4.9 2.034L15.333 52.033a2.88 2.88 0 0 1 0-4.067l10.825-10.844a2.868 2.868 0 0 1 3.13-.623 2.877 2.877 0 0 1 1.771 2.657v6.303h14.4v-14.4h-6.304a2.867 2.867 0 0 1-2.033-4.9l10.844-10.825a2.88 2.88 0 0 1 4.066 0l10.845 10.825a2.867 2.867 0 0 1 .623 3.129 2.875 2.875 0 0 1-2.657 1.772H54.54v14.4h14.398v-6.304c0-1.163.7-2.211 1.772-2.657a2.868 2.868 0 0 1 3.13.623l10.825 10.844a2.88 2.88 0 0 1 0 4.067L73.84 62.878a2.87 2.87 0 0 1-4.9-2.034V54.54h-14.4v14.4h6.304c1.163 0 2.211.7 2.657 1.772a2.866 2.866 0 0 1-.623 3.128L52.033 84.665a2.879 2.879 0 0 1-4.066 0L37.123 73.84a2.866 2.866 0 0 1-.624-3.128 2.877 2.877 0 0 1 2.657-1.773l6.304.001v-14.4Z' />
+		<path d='M100 8.043v83.913A8.048 8.048 0 0 1 91.956 100H8.043A8.047 8.047 0 0 1 0 91.956V8.043A8.047 8.047 0 0 1 8.043 0h83.913A8.047 8.047 0 0 1 100 8.043Zm-6.371 0c0-.923-.75-1.672-1.673-1.672H8.043c-.923 0-1.672.749-1.672 1.672v83.913c0 .923.749 1.673 1.672 1.673h83.913c.924 0 1.673-.75 1.673-1.673V8.043Z' />
+	</svg>
+);
+
+const FitWidth = ({ title, titleId, ...props })=>(
+	<svg
+		xmlns='http://www.w3.org/2000/svg'
+		xmlSpace='preserve'
+		style={{
+			fillRule         : 'evenodd',
+			clipRule         : 'evenodd',
+			strokeLinejoin   : 'round',
+			strokeMiterlimit : 2,
+	  }}
+		viewBox='0 0 100 100'
+		width='1em'
+		fill='currentColor'
+		aria-labelledby={titleId}
+		{...props}
+	>
+	  {title ? <title id={titleId}>{title}</title> : null}
+	  <path d='M31.06 54.54v6.304a2.87 2.87 0 0 1-4.9 2.034L15.332 52.032a2.88 2.88 0 0 1 0-4.067L26.16 37.122a2.868 2.868 0 0 1 3.129-.623 2.877 2.877 0 0 1 1.772 2.657v6.303h37.879v-6.303c0-1.163.7-2.211 1.772-2.657a2.868 2.868 0 0 1 3.129.623l10.825 10.844a2.88 2.88 0 0 1 0 4.067L73.84 62.877a2.87 2.87 0 0 1-4.901-2.033V54.54h-37.88ZM9.282 6.248v87.503a4.178 4.178 0 0 1-4.176 4.177H4.85A4.178 4.178 0 0 1 .674 93.75V6.248A4.177 4.177 0 0 1 4.85 2.072h.256a4.177 4.177 0 0 1 4.176 4.176ZM99.326 6.248v87.503a4.178 4.178 0 0 1-4.177 4.177h-.255a4.178 4.178 0 0 1-4.176-4.177V6.248a4.177 4.177 0 0 1 4.176-4.176h.255a4.177 4.177 0 0 1 4.177 4.176Z' />
+	</svg>
+);
+export { FitWidth, FitAll };
+