diff --git a/styleguide-app/Examples/AssignmentIcon.elm b/styleguide-app/Examples/AssignmentIcon.elm
index 12c41978..3d145c2b 100644
--- a/styleguide-app/Examples/AssignmentIcon.elm
+++ b/styleguide-app/Examples/AssignmentIcon.elm
@@ -9,6 +9,10 @@ module Examples.AssignmentIcon exposing (example, State, Msg)
 import Category exposing (Category(..))
 import Example exposing (Example)
 import Examples.IconExamples as IconExamples
+    exposing
+        ( IconExampleGroup
+        , viewByGroupWithSettings
+        )
 import Nri.Ui.AssignmentIcon.V2 as AssignmentIcon
 
 
@@ -47,53 +51,59 @@ example =
             , AssignmentIcon.standards
             , AssignmentIcon.writing
             ]
-    , view =
-        \ellieLinkConfig settings ->
-            let
-                viewExampleSection =
-                    IconExamples.view settings
-            in
-            [ IconExamples.viewSettings settings
-            , viewExampleSection "Diagnostic"
-                [ ( "diagnostic", AssignmentIcon.diagnostic )
-                , ( "planningDiagnosticCircled", AssignmentIcon.planningDiagnosticCircled )
-                , ( "unitDiagnosticCircled", AssignmentIcon.unitDiagnosticCircled )
-                ]
-            , viewExampleSection "Practice" <|
-                [ ( "practice", AssignmentIcon.practice )
-                , ( "practiceCircled", AssignmentIcon.practiceCircled )
-                ]
-            , viewExampleSection "Quiz" <|
-                [ ( "quiz", AssignmentIcon.quiz )
-                , ( "quizCircled", AssignmentIcon.quizCircled )
-                , ( "passageQuizCircled", AssignmentIcon.passageQuizCircled )
-                ]
-            , viewExampleSection "Writing" <|
-                [ ( "quickWrite", AssignmentIcon.quickWrite )
-                , ( "guidedDraft", AssignmentIcon.guidedDraft )
-                , ( "peerReview", AssignmentIcon.peerReview )
-                , ( "selfReview", AssignmentIcon.selfReview )
-                ]
-            , viewExampleSection "Writing II" <|
-                [ ( "quickWriteCircled", AssignmentIcon.quickWriteCircled )
-                , ( "guidedDraftCircled", AssignmentIcon.guidedDraftCircled )
-                , ( "peerReviewCircled", AssignmentIcon.peerReviewCircled )
-                , ( "selfReviewCircled", AssignmentIcon.selfReviewCircled )
-                ]
-            , viewExampleSection "Stages" <|
-                [ ( "submitting", AssignmentIcon.submitting )
-                , ( "rating", AssignmentIcon.rating )
-                , ( "revising", AssignmentIcon.revising )
-                ]
-            , viewExampleSection "Start" <|
-                [ ( "startPrimary", AssignmentIcon.startPrimary )
-                , ( "startSecondary", AssignmentIcon.startSecondary )
-                ]
-            , viewExampleSection "Activities" <|
-                [ ( "assessment", AssignmentIcon.assessment )
-                , ( "standards", AssignmentIcon.standards )
-                , ( "writing", AssignmentIcon.writing )
-                , ( "modules", AssignmentIcon.modules )
-                ]
-            ]
+    , view = \_ settings -> viewByGroupWithSettings settings all
     }
+
+
+all : List IconExampleGroup
+all =
+    [ ( "Diagnostic"
+      , [ ( "diagnostic", AssignmentIcon.diagnostic )
+        , ( "planningDiagnosticCircled", AssignmentIcon.planningDiagnosticCircled )
+        , ( "unitDiagnosticCircled", AssignmentIcon.unitDiagnosticCircled )
+        ]
+      )
+    , ( "Practice"
+      , [ ( "practice", AssignmentIcon.practice )
+        , ( "practiceCircled", AssignmentIcon.practiceCircled )
+        ]
+      )
+    , ( "Quiz"
+      , [ ( "quiz", AssignmentIcon.quiz )
+        , ( "quizCircled", AssignmentIcon.quizCircled )
+        , ( "passageQuizCircled", AssignmentIcon.passageQuizCircled )
+        ]
+      )
+    , ( "Writing"
+      , [ ( "quickWrite", AssignmentIcon.quickWrite )
+        , ( "guidedDraft", AssignmentIcon.guidedDraft )
+        , ( "peerReview", AssignmentIcon.peerReview )
+        , ( "selfReview", AssignmentIcon.selfReview )
+        ]
+      )
+    , ( "Writing II"
+      , [ ( "quickWriteCircled", AssignmentIcon.quickWriteCircled )
+        , ( "guidedDraftCircled", AssignmentIcon.guidedDraftCircled )
+        , ( "peerReviewCircled", AssignmentIcon.peerReviewCircled )
+        , ( "selfReviewCircled", AssignmentIcon.selfReviewCircled )
+        ]
+      )
+    , ( "Stages"
+      , [ ( "submitting", AssignmentIcon.submitting )
+        , ( "rating", AssignmentIcon.rating )
+        , ( "revising", AssignmentIcon.revising )
+        ]
+      )
+    , ( "Start"
+      , [ ( "startPrimary", AssignmentIcon.startPrimary )
+        , ( "startSecondary", AssignmentIcon.startSecondary )
+        ]
+      )
+    , ( "Activities"
+      , [ ( "assessment", AssignmentIcon.assessment )
+        , ( "standards", AssignmentIcon.standards )
+        , ( "writing", AssignmentIcon.writing )
+        , ( "modules", AssignmentIcon.modules )
+        ]
+      )
+    ]