icons/add.svg

@@ -0,0 +1,6 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="display: none;">
+    <symbol id="add" viewBox="0 0 32 32" preserveAspectRatio="xMidYMid meet">
+        <rect fill="var(--text-color)" x="13" y="0" width="6" height="32" rx="2" ry="2" />
+        <rect fill="var(--text-color)" x="0" y="13" width="32" height="6" rx="2" ry="2" />
+    </symbol>
+</svg>

icons/gear.svg

@@ -0,0 +1,14 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="display: none;">
+    <symbol id="gear" viewBox="0 0 16 16" preserveAspectRatio="xMidYMid meet">
+        <defs>
+            <rect id="rect" fill="var(--text-color)" x="6" y="0" width="4" height="4" rx="1" ry="1" />
+        </defs>
+        <use href="#rect"></use>
+        <use transform="rotate(60, 8, 8)" href="#rect"></use>
+        <use transform="rotate(120, 8, 8)" href="#rect"></use>
+        <use transform="rotate(180, 8, 8)" href="#rect"></use>
+        <use transform="rotate(240, 8, 8)" href="#rect"></use>
+        <use transform="rotate(300, 8, 8)" href="#rect"></use>
+        <circle fill="none" stroke="var(--text-color)" stroke-width="3" cx="8" cy="8" r="4.5" />
+    </symbol>
+</svg>

icons/index.html

@@ -8,6 +8,8 @@
     <h1>
         <svg class="icon"><use xlink:href="menu.svg/#menu"></use></svg>
         <svg class="icon"><use xlink:href="menu.svg/#menu-unread"></use></svg>
+        <svg class="icon"><use xlink:href="add.svg/#add"></use></svg>
+        <svg class="icon"><use xlink:href="gear.svg/#gear"></use></svg>
         Text
     </h1>
 </body>

index.html

@@ -19,8 +19,15 @@
                     </div>
                 </div>
                 <div id="left-pane-footer">
-                    <button id="add-buddy">Add a Buddy!</button>
-                    <button id="change-avatar">Change Avatar</button>
+                    <svg id="add-buddy" class="icon">
+                        <title>Add a buddy</title>
+                        <use href="icons/add.svg#add"></use>
+                    </svg>
+                    <!-- TODO: make this an actual settings modal -->
+                    <svg id="change-avatar" class="icon">
+                        <title>Change avatar</title>
+                        <use href="icons/gear.svg#gear"></use>
+                    </svg>
                     <!--
                     <div id="whoami">
                         <div id="whoami-status">

style/style.css

@@ -99,16 +99,19 @@ a, a:visited {
 
 #left-pane-footer {
     border-top: 1px solid var(--border-color);
+    font-size: 1.5em;
     padding: 5px;
-}
 
-#left-pane button {
-    width: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
 }
 
 #add-buddy {
-    background-color: transparent !important;
-    border: 1px dashed var(--border-color);
+    color: var(--text-color) !important;
+}
+
+#change-avatar {
     color: var(--text-color) !important;
 }