diff --git a/src/components/button/button.css b/src/components/button/button.css
index 5e69aabd4..9ce746c52 100644
--- a/src/components/button/button.css
+++ b/src/components/button/button.css
@@ -7,6 +7,7 @@
     align-items: center;
     padding-left: .75rem;
     padding-right: .75rem;
+    user-select: none;
 }
 
 .icon {
diff --git a/src/components/filter/icon--filter.svg b/src/components/filter/icon--filter.svg
index 2a0c75fcb..400bd6234 100644
--- a/src/components/filter/icon--filter.svg
+++ b/src/components/filter/icon--filter.svg
@@ -1,3 +1,3 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="14.5" height="14.6" viewBox="0 0 14.5 14.6">
-  <path fill="#FFFFFF" d="M10.4 9.2l-.8-.1-.2-.2c.5-.5.8-1 1-1.6.2-.6.3-1.2.3-1.9 0-1-.2-1.9-.7-2.7-.4-.9-1.1-1.5-1.9-2C7.3.2 6.3 0 5.4 0c-.9 0-1.9.2-2.7.7-.9.5-1.5 1.2-2 2S0 4.4 0 5.4s.2 1.9.7 2.8c.5.8 1.2 1.4 2 1.9s1.7.7 2.7.7c.7 0 1.3-.1 1.9-.3.6-.3 1.1-.6 1.6-1l.2.3v.6l4.1 4.2 1.3-1.3-4.1-4.1zM8.7 7.3c-.4.6-.8 1.1-1.4 1.4-.6.3-1.2.5-1.9.5-.6 0-1.3-.2-1.8-.5-.6-.4-1.1-.8-1.4-1.4-.3-.6-.5-1.2-.5-1.9s.2-1.4.5-1.9.8-1 1.4-1.3c.5-.4 1.1-.5 1.8-.5s1.3.1 1.9.5c.6.3 1 .8 1.4 1.3.3.6.5 1.2.5 1.9S9 6.7 8.7 7.3z"/>
+  <path fill="#4C97FF" d="M10.4 9.2l-.8-.1-.2-.2c.5-.5.8-1 1-1.6.2-.6.3-1.2.3-1.9 0-1-.2-1.9-.7-2.7-.4-.9-1.1-1.5-1.9-2C7.3.2 6.3 0 5.4 0c-.9 0-1.9.2-2.7.7-.9.5-1.5 1.2-2 2S0 4.4 0 5.4s.2 1.9.7 2.8c.5.8 1.2 1.4 2 1.9s1.7.7 2.7.7c.7 0 1.3-.1 1.9-.3.6-.3 1.1-.6 1.6-1l.2.3v.6l4.1 4.2 1.3-1.3-4.1-4.1zM8.7 7.3c-.4.6-.8 1.1-1.4 1.4-.6.3-1.2.5-1.9.5-.6 0-1.3-.2-1.8-.5-.6-.4-1.1-.8-1.4-1.4-.3-.6-.5-1.2-.5-1.9s.2-1.4.5-1.9.8-1 1.4-1.3c.5-.4 1.1-.5 1.8-.5s1.3.1 1.9.5c.6.3 1 .8 1.4 1.3.3.6.5 1.2.5 1.9S9 6.7 8.7 7.3z"/>
 </svg>
diff --git a/src/components/filter/icon--x.svg b/src/components/filter/icon--x.svg
index e78a2a8e2..88b52e870 100644
--- a/src/components/filter/icon--x.svg
+++ b/src/components/filter/icon--x.svg
@@ -1,3 +1,3 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="9" height="8" viewBox="0 0 9 8">
-  <path fill="none" stroke="#FFF" stroke-width="2" d="M1 7.333L7.333 1M1 1L7.333 7.333" stroke-linecap="round" stroke-linejoin="round"/>
+  <path fill="none" stroke="#4C97FF" stroke-width="2" d="M1 7.333L7.333 1M1 1L7.333 7.333" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
diff --git a/src/components/library/library.css b/src/components/library/library.css
index 489162a67..9a1872bae 100644
--- a/src/components/library/library.css
+++ b/src/components/library/library.css
@@ -17,9 +17,15 @@
     display: flex;
     flex-direction: row;
     background-color: $motion-transparent;
+    justify-content: flex-start;
+    height: 4.5rem;
     padding: 1rem;
 }
 
+.filter-bar-item {
+    margin-right: .75rem;
+}
+
 .filter {
     flex-grow: 0;
 }
@@ -29,11 +35,11 @@
     transition: 6s;
 }
 
-.filter-input:focus {
+.filter-input:focus,
+.filter-input:not([value=""]) {
     width: 13.25rem;
 }
 
 .divider {
-    margin: 0 .75rem;
     transform: scaleY(1.39);
 }
diff --git a/src/components/library/library.jsx b/src/components/library/library.jsx
index ec9b26097..2e0d3085c 100644
--- a/src/components/library/library.jsx
+++ b/src/components/library/library.jsx
@@ -1,3 +1,4 @@
+import classNames from 'classnames';
 import bindAll from 'lodash.bindall';
 import PropTypes from 'prop-types';
 import React from 'react';
@@ -6,9 +7,23 @@ import LibraryItem from '../library-item/library-item.jsx';
 import ModalComponent from '../modal/modal.jsx';
 import Divider from '../divider/divider.jsx';
 import Filter from '../filter/filter.jsx';
+import TagButton from '../tag-button/tag-button.jsx';
+
+import placeholderSvg from '../../lib/assets/placeholder.svg';
 
 import styles from './library.css';
 
+const tagListPrefix = [{
+    active: true,
+    title: 'All',
+    iconSrc: placeholderSvg
+}];
+
+const defaultTagProps = {
+    active: false,
+    iconSrc: placeholderSvg
+};
+
 class LibraryComponent extends React.Component {
     constructor (props) {
         super(props);
@@ -59,17 +74,38 @@ class LibraryComponent extends React.Component {
                 contentLabel={this.props.title}
                 onRequestClose={this.props.onRequestClose}
             >
-                <div className={styles.filterBar}>
-                    <Filter
-                        className={styles.filter}
-                        filterQuery={this.state.filterQuery}
-                        inputClassName={styles.filterInput}
-                        onChange={this.handleFilterChange}
-                        onClear={this.handleFilterClear}
-                    />
-                    <Divider className={styles.divider} />
-
-                </div>
+                {(this.props.filterable || this.props.tags) && (
+                    <div className={styles.filterBar}>
+                        {this.props.filterable && (
+                            <Filter
+                                className={classNames(
+                                    styles.filterBarItem,
+                                    styles.filter
+                                )}
+                                filterQuery={this.state.filterQuery}
+                                inputClassName={styles.filterInput}
+                                onChange={this.handleFilterChange}
+                                onClear={this.handleFilterClear}
+                            />
+                        )}
+                        {this.props.filterable && this.props.tags && (
+                            <Divider className={classNames(styles.filterBarItem, styles.divider)} />
+                        )}
+                        {this.props.tags &&
+                            (tagListPrefix.concat(this.props.tags)).map((tagProps, id) => (
+                                <TagButton
+                                    {...{...defaultTagProps, ...tagProps}}
+                                    className={classNames(
+                                        styles.filterBarItem,
+                                        styles.tagButton,
+                                        tagProps.className
+                                    )}
+                                    key={`tag-button-${id}`}
+                                />
+                            ))
+                        }
+                    </div>
+                )}
                 <div className={styles.libraryScrollGrid}>
                     {this.getFilteredData().map((dataItem, index) => {
                         const scratchURL = dataItem.md5 ?
@@ -110,11 +146,17 @@ LibraryComponent.propTypes = {
         })
         /* eslint-enable react/no-unused-prop-types, lines-around-comment */
     ),
+    filterable: PropTypes.bool,
     onItemMouseEnter: PropTypes.func,
     onItemMouseLeave: PropTypes.func,
     onItemSelected: PropTypes.func,
     onRequestClose: PropTypes.func,
+    tags: PropTypes.arrayOf(TagButton.propTypes),
     title: PropTypes.string.isRequired
 };
 
+LibraryComponent.defaultProps = {
+    filterable: true
+};
+
 export default LibraryComponent;
diff --git a/src/components/tag-button/tag-button.css b/src/components/tag-button/tag-button.css
new file mode 100644
index 000000000..1dbe7f152
--- /dev/null
+++ b/src/components/tag-button/tag-button.css
@@ -0,0 +1,17 @@
+@import "../../css/colors.css";
+
+.tag-button {
+    padding: .625rem 1rem;
+    background: $motion-primary;
+    border-radius: 1.375rem;
+    color: $ui-white;
+}
+
+.tag-button-icon {
+    max-width: 1rem;
+    max-height: 1rem;
+}
+
+.active {
+    background: $data-primary;
+}
diff --git a/src/components/tag-button/tag-button.jsx b/src/components/tag-button/tag-button.jsx
new file mode 100644
index 000000000..cf937e538
--- /dev/null
+++ b/src/components/tag-button/tag-button.jsx
@@ -0,0 +1,42 @@
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import Button from '../button/button.jsx';
+
+import styles from './tag-button.css';
+
+const TagButton = ({
+    active,
+    iconClassName,
+    className,
+    title,
+    ...props
+}) => (
+    <Button
+        className={classNames(
+            styles.tagButton,
+            className, {
+                [styles.active]: active
+            }
+        )}
+        iconClassName={classNames(
+            styles.tagButtonIcon,
+            iconClassName
+        )}
+        {...props}
+    >
+        {title}
+    </Button>
+);
+
+TagButton.propTypes = {
+    ...Button.propTypes,
+    active: PropTypes.bool,
+    title: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.object // FormattedMessage
+    ]).isRequired
+};
+
+export default TagButton;
diff --git a/src/containers/extension-library.jsx b/src/containers/extension-library.jsx
index 5d602cfbd..cae675405 100644
--- a/src/containers/extension-library.jsx
+++ b/src/containers/extension-library.jsx
@@ -45,6 +45,7 @@ class ExtensionLibrary extends React.PureComponent {
         return (
             <LibraryComponent
                 data={extensionLibraryThumbnailData}
+                filterable={false}
                 title="Choose an Extension"
                 visible={this.props.visible}
                 onItemSelected={this.handleItemSelect}
diff --git a/src/containers/sprite-library.jsx b/src/containers/sprite-library.jsx
index 3ef9834fd..ea2413d6e 100644
--- a/src/containers/sprite-library.jsx
+++ b/src/containers/sprite-library.jsx
@@ -6,6 +6,7 @@ import VM from 'scratch-vm';
 
 import analytics from '../lib/analytics';
 import spriteLibraryContent from '../lib/libraries/sprites.json';
+import spriteTags from '../lib/libraries/sprite-tags';
 
 import LibraryComponent from '../components/library/library.jsx';
 
@@ -72,6 +73,7 @@ class SpriteLibrary extends React.PureComponent {
         return (
             <LibraryComponent
                 data={this.state.sprites}
+                tags={spriteTags}
                 title={
                     <FormattedMessage
                         defaultMessage="Sprite Library"
diff --git a/src/lib/libraries/sprite-tags.js b/src/lib/libraries/sprite-tags.js
new file mode 100644
index 000000000..3659399e4
--- /dev/null
+++ b/src/lib/libraries/sprite-tags.js
@@ -0,0 +1,36 @@
+import placeholderSvg from '../../lib/assets/placeholder.svg';
+
+export default [
+    {
+        title: 'Animals',
+        iconSrc: placeholderSvg
+    },
+    {
+        title: 'People',
+        iconSrc: placeholderSvg
+    },
+    {
+        title: 'Fantasy',
+        iconSrc: placeholderSvg
+    },
+    {
+        title: 'Dance',
+        iconSrc: placeholderSvg
+    },
+    {
+        title: 'Music',
+        iconSrc: placeholderSvg
+    },
+    {
+        title: 'Sports',
+        iconSrc: placeholderSvg
+    },
+    {
+        title: 'Food',
+        iconSrc: placeholderSvg
+    },
+    {
+        title: 'Fashion',
+        iconSrc: placeholderSvg
+    }
+];