diff --git a/src/components/library-item/library-item.css b/src/components/library-item/library-item.css
index 4d90f6147874728c8244e52736d2c572120717d3..e3c051cab19bafc59945c53260f8694674c87b27 100644
--- a/src/components/library-item/library-item.css
+++ b/src/components/library-item/library-item.css
@@ -1,8 +1,17 @@
 .library-item {
     cursor: pointer;
     text-align: center;
+    width: 140px;
 }
 .library-item.is-selected {
     background: #aaa;
     border-radius: 6px;
 }
+.library-item-image-container {
+    height: 140px;
+}
+.library-item-image {
+    align-self: center;
+    max-width: 100%;
+    max-height: 100%;
+}
diff --git a/src/components/library-item/library-item.jsx b/src/components/library-item/library-item.jsx
index 3e47a2beecde42cb7c22df5bf75bded1508f0c1a..a34ad206d5b565b0d254b1159baba2b199771216 100644
--- a/src/components/library-item/library-item.jsx
+++ b/src/components/library-item/library-item.jsx
@@ -3,7 +3,6 @@ const bindAll = require('lodash.bindall');
 const React = require('react');
 
 const Box = require('../box/box.jsx');
-const CostumeCanvas = require('../costume-canvas/costume-canvas.jsx');
 const styles = require('./library-item.css');
 
 class LibraryItem extends React.Component {
@@ -25,10 +24,14 @@ class LibraryItem extends React.Component {
                     [styles.isSelected]: this.props.selected
                 })}
                 direction="column"
-                width={140}
                 onClick={this.handleClick}
             >
-                <CostumeCanvas url={this.props.iconURL} />
+                <Box className={styles.libraryItemImageContainer}>
+                    <img
+                        className={styles.libraryItemImage}
+                        src={this.props.iconURL}
+                    />
+                </Box>
                 <p>{this.props.name}</p>
             </Box>
         );