diff --git a/src/docs/pages/components/Avatar.vue b/src/docs/pages/components/Avatar.vue
index 240c01a..3c5cd94 100644
--- a/src/docs/pages/components/Avatar.vue
+++ b/src/docs/pages/components/Avatar.vue
@@ -47,7 +47,53 @@
     </div>
 
     <div slot="code">
-      <h2>Code</h2>
+      <demo-example label="Default">
+        <code-block lang="xml">
+&lt;md-avatar class=&quot;md-large&quot;&gt;
+  &lt;img src=&quot;//placeimg.com/64/64/people/2&quot; alt=&quot;People&quot;&gt;
+&lt;/md-avatar&gt;
+
+&lt;md-avatar class=&quot;md-avatar-icon md-large&quot;&gt;
+  &lt;md-icon&gt;home&lt;/md-icon&gt;
+&lt;/md-avatar&gt;
+
+&lt;md-avatar class=&quot;md-avatar-icon md-large md-primary&quot;&gt;
+  &lt;md-icon&gt;folder&lt;/md-icon&gt;
+&lt;/md-avatar&gt;
+
+&lt;md-avatar class=&quot;md-avatar-icon md-large md-accent&quot;&gt;
+  &lt;md-icon&gt;favorite&lt;/md-icon&gt;
+&lt;/md-avatar&gt;
+
+&lt;md-avatar class=&quot;md-avatar-icon md-large md-warn&quot;&gt;
+  &lt;md-icon&gt;notes&lt;/md-icon&gt;
+&lt;/md-avatar&gt;
+        </code-block>
+      </demo-example>
+
+      <demo-example label="Large">
+        <code-block lang="xml">
+&lt;md-avatar&gt;
+  &lt;img src=&quot;//placeimg.com/40/40/people/1&quot; alt=&quot;People&quot;&gt;
+&lt;/md-avatar&gt;
+
+&lt;md-avatar class=&quot;md-avatar-icon&quot;&gt;
+  &lt;md-icon&gt;home&lt;/md-icon&gt;
+&lt;/md-avatar&gt;
+
+&lt;md-avatar class=&quot;md-avatar-icon md-primary&quot;&gt;
+  &lt;md-icon&gt;folder&lt;/md-icon&gt;
+&lt;/md-avatar&gt;
+
+&lt;md-avatar class=&quot;md-avatar-icon md-accent&quot;&gt;
+  &lt;md-icon&gt;favorite&lt;/md-icon&gt;
+&lt;/md-avatar&gt;
+
+&lt;md-avatar class=&quot;md-avatar-icon md-warn&quot;&gt;
+  &lt;md-icon&gt;notes&lt;/md-icon&gt;
+&lt;/md-avatar&gt;
+        </code-block>
+      </demo-example>
     </div>
 
     <div slot="api">