diff --git a/web/sidebar/expand-buttons.css b/web/sidebar/expand-buttons.css
new file mode 100644
--- /dev/null
+++ b/web/sidebar/expand-buttons.css
@@ -0,0 +1,13 @@
+.buttonIcon {
+  color: var(--drawer-expand-button);
+}
+
+.disabledButtonIcon {
+  color: var(--drawer-expand-button-disabled);
+}
+
+.button {
+  font-size: var(--xs-font-12);
+  width: 24px;
+  height: 24px;
+}
diff --git a/web/sidebar/expand-buttons.react.js b/web/sidebar/expand-buttons.react.js
new file mode 100644
--- /dev/null
+++ b/web/sidebar/expand-buttons.react.js
@@ -0,0 +1,33 @@
+// @flow
+
+import { faCaretDown, faCaretRight } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import classNames from 'classnames';
+import * as React from 'react';
+
+import css from './expand-buttons.css';
+import Button from '../components/button.react.js';
+
+type Props = {
+  +onClick?: () => mixed,
+  +expanded?: boolean,
+  +disabled?: boolean,
+};
+
+function ExpandButton(props: Props): React.Node {
+  const { onClick, expanded = false, disabled } = props;
+  const icon = expanded ? faCaretDown : faCaretRight;
+
+  const iconClass = classNames({
+    [css.disabledButtonIcon]: disabled,
+    [css.buttonIcon]: !disabled,
+  });
+
+  return (
+    <Button onClick={onClick} className={css.button} disabled={disabled}>
+      <FontAwesomeIcon icon={icon} className={iconClass} />
+    </Button>
+  );
+}
+
+export { ExpandButton };
diff --git a/web/theme.css b/web/theme.css
--- a/web/theme.css
+++ b/web/theme.css
@@ -194,4 +194,6 @@
   --spoiler-text-color: var(--spoiler-color);
   --spoiler-background-color: var(--spoiler-color);
   --purple-link: var(--violet-light-100);
+  --drawer-expand-button: var(--shades-black-60);
+  --drawer-expand-button-disabled: var(--shades-black-80);
 }