diff --git a/app/assets/stylesheets/sdg/goals/index.scss b/app/assets/stylesheets/sdg/goals/index.scss
new file mode 100644
index 000000000..23cf9074e
--- /dev/null
+++ b/app/assets/stylesheets/sdg/goals/index.scss
@@ -0,0 +1,25 @@
+.sdg-goals-index {
+
+  .sdg-goal-list {
+    @include grid-row;
+    @include grid-column-gutter;
+    list-style: none;
+    margin-bottom: 0;
+    max-width: 40rem;
+
+    li {
+      display: inline-block;
+      $spacing: 1vw;
+
+      line-height: 0;
+      margin-bottom: $spacing;
+      padding-left: $spacing / 2;
+      padding-right: $spacing / 2;
+      width: 1 * 100% / 6;
+
+      .sdg-goal-icon {
+        width: 100%;
+      }
+    }
+  }
+}
diff --git a/app/components/sdg/goals/index_component.html.erb b/app/components/sdg/goals/index_component.html.erb
index d475bf90b..f03bb2ef1 100644
--- a/app/components/sdg/goals/index_component.html.erb
+++ b/app/components/sdg/goals/index_component.html.erb
@@ -1 +1,3 @@
-<%= link_list(*goals.map { |goal| [goal.code_and_title, sdg_goal_path(goal.code)] }) %>
+<div class="sdg-goals-index">
+  <%= link_list(*goal_links, class: "sdg-goal-list") %>
+</div>
diff --git a/app/components/sdg/goals/index_component.rb b/app/components/sdg/goals/index_component.rb
index e89079166..dd59427d8 100644
--- a/app/components/sdg/goals/index_component.rb
+++ b/app/components/sdg/goals/index_component.rb
@@ -5,4 +5,18 @@ class SDG::Goals::IndexComponent < ApplicationComponent
   def initialize(goals)
     @goals = goals
   end
+
+  private
+
+    def goal_links
+      goals.map { |goal| goal_link(goal) }
+    end
+
+    def goal_link(goal)
+      [icon(goal), sdg_goal_path(goal.code)]
+    end
+
+    def icon(goal)
+      render SDG::Goals::IconComponent.new(goal)
+    end
 end