diff --git a/src/mol-plugin/skin/base/icons.scss b/src/mol-plugin/skin/base/icons.scss
index 2c4c0590c5916943e5db8569171199a3ecd82eee..7c642ee711538fcf36bd3a881feb6d163d119e6f 100644
--- a/src/mol-plugin/skin/base/icons.scss
+++ b/src/mol-plugin/skin/base/icons.scss
@@ -213,3 +213,7 @@
 .msp-icon-floppy:before {
 	content: "\e8d0";
 }
+
+.msp-icon-tape:before {
+	content: "\e8c8";
+}
diff --git a/src/mol-plugin/ui/controls.tsx b/src/mol-plugin/ui/controls.tsx
index 777d2eb9db7b94aaad0868018aba91d7c3a90f5c..662267e115f8dc9ae705bf0eafa6fcf1e41878d7 100644
--- a/src/mol-plugin/ui/controls.tsx
+++ b/src/mol-plugin/ui/controls.tsx
@@ -234,7 +234,7 @@ export class AnimationViewportControls extends PluginUIComponent<{}, { isEmpty:
         const isAnimating = this.state.isAnimating;
 
         return <div className='msp-animation-viewport-controls'>
-            <IconButton icon={isAnimating || isPlaying ? 'stop' : 'play'} title={isAnimating ? 'Stop' : 'Select Animation'}
+            <IconButton icon={isAnimating || isPlaying ? 'stop' : 'tape'} title={isAnimating ? 'Stop' : 'Select Animation'}
                 onClick={isAnimating || isPlaying ? this.stop : this.toggleExpanded}
                 disabled={isAnimating|| isPlaying ? false : this.state.isUpdating || this.state.isPlaying || this.state.isEmpty} />
             {(this.state.isExpanded && !this.state.isUpdating) && <div className='msp-animation-viewport-controls-select'>