diff --git a/assets/scss/_nav.scss b/assets/scss/_nav.scss
index 6113f802c5..3950a28bae 100644
--- a/assets/scss/_nav.scss
+++ b/assets/scss/_nav.scss
@@ -95,4 +95,37 @@
             }
         }
     }
+}
+
+// Icons
+#main_navbar {
+    li i {
+    padding-right: 0.5em;
+
+        &:before {
+            display: inline-block;
+            text-align: center;
+            min-width: 1em;
+        }
+    }
+  .alert {
+    background-color: inherit;
+    padding:0;
+    color: $secondary;
+    border: 0;
+    font-weight: inherit;
+
+        &:before {
+            display: inline-block;
+            font-style: normal;
+            font-variant: normal;
+            text-rendering: auto;
+            -webkit-font-smoothing: antialiased;
+            font-family: "Font Awesome 5 Free";
+            font-weight: 900; 
+            content: "\f0d9";
+            padding-left: 0.5em;
+            padding-right: 0.5em;
+        }
+    }  
 }
\ No newline at end of file
diff --git a/layouts/partials/navbar.html b/layouts/partials/navbar.html
index 284283b3c4..8f782910f3 100644
--- a/layouts/partials/navbar.html
+++ b/layouts/partials/navbar.html
@@ -12,9 +12,11 @@
 				{{ with .Page }}
 				{{ $active = or $active ( $.IsDescendant .)  }}
 				{{ end }}
+				{{ $pre := .Pre }}
+				{{ $post := .Post }}
 				{{ $url := urls.Parse .URL }}
 				{{ $baseurl := urls.Parse $.Site.Params.Baseurl }}
-				<a class="nav-link{{if $active }} active{{end}}" href="{{ with .Page }}{{ .RelPermalink }}{{ else }}{{ .URL | relLangURL }}{{ end }}" {{ if ne $url.Host $baseurl.Host }}target="_blank" {{ end }}><span{{if $active }} class="active"{{end}}>{{ .Name }}</span></a>
+				<a class="nav-link{{if $active }} active{{end}}" href="{{ with .Page }}{{ .RelPermalink }}{{ else }}{{ .URL | relLangURL }}{{ end }}" {{ if ne $url.Host $baseurl.Host }}target="_blank" {{ end }}>{{ with .Pre}}{{ $pre }}{{ end }}<span{{if $active }} class="active"{{end}}>{{ .Name }}</span>{{ with .Post}}{{ $post }}{{ end }}</a>
 			</li>
 			{{ end }}
 			{{ if  .Site.Params.versions }}
diff --git a/userguide/config.toml b/userguide/config.toml
index fa8ef30945..fb5253fb77 100644
--- a/userguide/config.toml
+++ b/userguide/config.toml
@@ -58,10 +58,13 @@ anchor = "smart"
     name = "Example Site"
     weight = 40
     url = "https://example.docsy.dev"
+    pre = "<i class='fas fa-laptop-code'></i>"
 [[menu.main]]
     name = "GitHub"
     weight = 50
     url = "https://github.com/google/docsy/"
+    pre = "<i class='fab fa-github'></i>"
+    post = "<span class='alert'>New!</span>" 
 
 [services]
 [services.googleAnalytics]
diff --git a/userguide/content/en/about/_index.md b/userguide/content/en/about/_index.md
index f16b34d2ec..e2fc666eb7 100644
--- a/userguide/content/en/about/_index.md
+++ b/userguide/content/en/about/_index.md
@@ -4,6 +4,7 @@ linkTitle: About
 menu:
   main:
     weight: 10
+    pre: <i class='fas fa-info-circle'></i>
 layout: docs
 ---
 
diff --git a/userguide/content/en/community/_index.md b/userguide/content/en/community/_index.md
index cdade16308..191ce2026c 100644
--- a/userguide/content/en/community/_index.md
+++ b/userguide/content/en/community/_index.md
@@ -3,6 +3,7 @@ title: Community
 menu:
   main:
     weight: 40
+    pre: <i class='fas fa-users'></i>
 ---
 
 <!--add blocks of content here to add more sections to the community page -->
diff --git a/userguide/content/en/docs/Adding content/navigation.md b/userguide/content/en/docs/Adding content/navigation.md
index a1aa559b67..60622d37ce 100644
--- a/userguide/content/en/docs/Adding content/navigation.md	
+++ b/userguide/content/en/docs/Adding content/navigation.md	
@@ -14,11 +14,12 @@ To add a page or section to this menu, add it to the site's `main` menu in eithe
 
 ```yaml
 ---
-title: "Docsy Documentation"
+title: "Welcome to Docsy"
 linkTitle: "Documentation"
 menu:
   main:
     weight: 20
+    pre: <i class='fas fa-book'></i>
 ---
 ```
 
@@ -33,6 +34,21 @@ If you want to add a link to an external site to this menu, add it in `config.to
     url = "https://github.com/google/docsy/"
 ```
 
+### Adding icons to the top-level menu
+
+As described in the [Hugo docs](https://gohugo.io/content-management/menus/#add-non-content-entries-to-a-menu), you can add icons to the top-level menu by using the pre and/or post parameter for main menu items defined in your site's `config.toml` or via page front matter. For example, the following configuration adds the GitHub icon to the GitHub menu item, and a **New!** alert to indicate that this is a new addition to the menu.
+
+```yaml
+[[menu.main]]
+    name = "GitHub"
+    weight = 50
+    url = "https://github.com/google/docsy/"
+    pre = "<i class='fab fa-github'></i>"
+    post = "<span class='alert'>New!</span>" 
+```
+
+You can find a complete list of icons to use in the [FontAwesome documentation](https://fontawesome.com/icons?d=gallery&p=2). Docsy includes the free FontAwesome icons by default.
+
 ### Adding a version drop-down
 
 If you add some `[params.versions]` in `config.toml`, the Docsy theme adds a
diff --git a/userguide/content/en/docs/_index.md b/userguide/content/en/docs/_index.md
index ff67eb7dc8..fea25a6e5b 100755
--- a/userguide/content/en/docs/_index.md
+++ b/userguide/content/en/docs/_index.md
@@ -5,6 +5,7 @@ linkTitle: "Documentation"
 menu:
   main:
     weight: 20
+    pre: <i class='fas fa-book'></i>
 ---
 
 Welcome to the Docsy theme user guide! This guide shows you how to get started creating technical documentation sites using Docsy, including site customization and how to use Docsy's blocks and templates.