diff --git a/CHANGELOG.md b/CHANGELOG.md
index b2efbdcda..a6cfd922f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+* Create files for custom paragraphs for `webview`
 * Style `horizontal rule for vertically-tight tables` in `nursing-external`
 * Style `multipart questions` in `bca`
 * Style `safetey-alert title color` in `nursing-internal`
diff --git a/styles/books/generic/webview.scss b/styles/books/generic/webview.scss
index adcb0897a..cf75eef70 100644
--- a/styles/books/generic/webview.scss
+++ b/styles/books/generic/webview.scss
@@ -344,6 +344,40 @@
     ),
 ));
 
+@include add_settings((
+  ParaAnnotationWithIcon: (
+    _selectors: ('p.annotation'),
+  ),
+  CultureAnnotationIcon:(
+    _selectors: ("span.culture-icon"),
+    'ParaAnnotationIcon:::background': url("https://raw.githubusercontent.com/openstax/rex-web/main/public/static/icons/cosmos-culture.svg") no-repeat top left
+  ),
+  LinguisticAnnotationIcon: (
+    _selectors: ("span.linguistic-icon"),
+    'ParaAnnotationIcon:::background': url(toDataUri("svg+xml", "designs/webview/resources/cosmos-linguistic.svg")) no-repeat top left
+  ),
+  DreamingAnnotationIcon: (
+    _selectors: ("span.dreaming-icon"),
+    'ParaAnnotationIcon:::background': url(toDataUri("svg+xml", "designs/webview/resources/cosmos-dreaming.svg")) no-repeat top left
+  ),
+  VisualAnnotationIcon: (
+    _selectors: ("span.visual-icon"),
+    'ParaAnnotationIcon:::background': url(toDataUri("svg+xml", "designs/webview/resources/cosmos-visual.svg")) no-repeat top left
+  ),
+  SpeechAnnotationIcon: (
+    _selectors: ("span.speech-icon"),
+    'ParaAnnotationIcon:::background': url(toDataUri("svg+xml", "designs/webview/resources/cosmos-speech.svg")) no-repeat top left
+  ),
+  AuditoryAnnotationIcon: (
+    _selectors: ("span.auditory-icon"),
+    'ParaAnnotationIcon:::background': url(toDataUri("svg+xml", "designs/webview/resources/cosmos-auditory.svg")) no-repeat top left
+  ),
+  KinestheticAnnotationIcon: (
+    _selectors: ("span.kinesthetic-icon"),
+    'ParaAnnotationIcon:::background': url(toDataUri("svg+xml", "designs/webview/resources/cosmos-kinesthetic.svg")) no-repeat top left
+  ),
+));
+
 @include add_settings((
     AnswerKey: (
         _selectors: ('.os-eob.os-solutions-container'),
@@ -451,6 +485,16 @@
 @include use('PurpleColoredText', 'webview:::ColoredText');
 @include use('BlueColoredText', 'webview:::ColoredText');
 
+// Custom paragraphs
+@include use('ParaAnnotationWithIcon', 'webview:::ParaAnnotationWithIconShape');
+@include use('CultureAnnotationIcon', 'webview:::ParaAnnotationIconShape');
+@include use('LinguisticAnnotationIcon', 'webview:::ParaAnnotationIconShape');
+@include use('DreamingAnnotationIcon', 'webview:::ParaAnnotationIconShape');
+@include use('VisualAnnotationIcon', 'webview:::ParaAnnotationIconShape');
+@include use('SpeechAnnotationIcon', 'webview:::ParaAnnotationIconShape');
+@include use('AuditoryAnnotationIcon', 'webview:::ParaAnnotationIconShape');
+@include use('KinestheticAnnotationIcon', 'webview:::ParaAnnotationIconShape');
+
 // EOC
 @include use('WorksCited', 'webview:::ModuleWithIndentationShape');
 @include use('SectionWorksCited', 'webview:::ModuleWithIndentationShape');
diff --git a/styles/design-settings/webview/_design.scss b/styles/design-settings/webview/_design.scss
index 103738450..5bd3a77d4 100644
--- a/styles/design-settings/webview/_design.scss
+++ b/styles/design-settings/webview/_design.scss
@@ -25,3 +25,4 @@
 @import '../../designs/webview/parts/coloredText-shapes';
 @import '../../designs/webview/parts/module-shapes';
 @import '../../designs/webview/parts/answerkey-shapes';
+@import '../../designs/webview/parts/customPara-shapes';
diff --git a/styles/designs/webview/parts/_customPara-components.scss b/styles/designs/webview/parts/_customPara-components.scss
new file mode 100644
index 000000000..a90c3ec8f
--- /dev/null
+++ b/styles/designs/webview/parts/_customPara-components.scss
@@ -0,0 +1,30 @@
+// Annotation with Icon
+
+$Para--Annotation--WithIcon: (
+  _name: "ParaAnnotationWithIcon",
+  _subselector: '',
+  _properties:(
+  )
+);
+
+$Para--Annotation__IconContainer: (
+  _name: "ParaAnnotationIconContainer",
+  _subselector: ' > .os-icons',
+  _properties:(
+    display: flex,
+    float: left,
+  )
+);
+
+$Para--Annotation__Icon: (
+  _name: "ParaAnnotationIcon",
+  _subselector: '',
+  _properties:(
+    height: 2rem,
+    width: 2rem,
+    background: enum('ValueSet:::REQUIRED'),
+    content: "''",
+    background-repeat: no-repeat,
+    margin: '0.15rem 1rem 0.15rem 0',
+  )
+);
diff --git a/styles/designs/webview/parts/_customPara-shapes.scss b/styles/designs/webview/parts/_customPara-shapes.scss
new file mode 100644
index 000000000..235813d84
--- /dev/null
+++ b/styles/designs/webview/parts/_customPara-shapes.scss
@@ -0,0 +1,19 @@
+@import './customPara-components';
+
+// Annotation with Icon
+
+@include create_shape('webview:::ParaAnnotationWithIconShape', (
+  _components: (
+    map-merge($Para--Annotation--WithIcon,(
+      _components: (
+        $Para--Annotation__IconContainer,
+      ),
+    ))
+  ),
+));
+
+@include create_shape('webview:::ParaAnnotationIconShape', (
+  _components: (
+    $Para--Annotation__Icon,
+  )
+));
\ No newline at end of file
diff --git a/styles/designs/webview/resources/cosmos-auditory.svg b/styles/designs/webview/resources/cosmos-auditory.svg
new file mode 100644
index 000000000..c485cb9e4
--- /dev/null
+++ b/styles/designs/webview/resources/cosmos-auditory.svg
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 15.4 15.4" style="enable-background:new 0 0 15.4 15.4;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#F37541;}
+</style>
+<path class="st0" d="M7.7,0C3.4,0,0,3.4,0,7.7s3.4,7.7,7.7,7.7s7.7-3.4,7.7-7.7S12,0,7.7,0z M9.6,11.1l-0.1,0.2c-0.9,1-1.7,2-2.7,2
+	c-0.1,0-0.2,0-0.3,0C4.9,13,4.6,11.7,4.6,11c0-0.2,0.1-0.3,0.3-0.3c0.1,0,0.3,0.1,0.3,0.3c0,0.1,0,1.5,1.3,1.8
+	C7.4,12.9,8.1,12,9,10.9l0.1-0.2c1-1.3,1.5-2.4,1.5-3.8c0-1.8-0.9-3.7-2.8-3.9C7.1,2.9,6.4,3.1,5.9,3.6c-0.6,0.6-0.7,1.5-0.6,2
+	c0,0.1-0.1,0.3-0.2,0.3C5,6,4.8,5.9,4.8,5.7C4.6,5.1,4.9,4,5.5,3.3c0.4-0.5,1.2-1,2.4-0.8C10.2,2.8,11.2,5,11.2,7
+	C11.2,8.5,10.7,9.8,9.6,11.1z M5.6,7.9C5.8,7.8,6,7.7,6.3,7.8c0.3,0.1,0.5,0.3,0.6,0.6C7,8.6,6.9,8.9,6.7,9C6.6,9.1,6.4,9.1,6.3,9
+	c-0.1-0.1-0.1-0.3,0-0.4c0,0,0-0.1,0-0.1c0-0.1-0.1-0.1-0.2-0.2c-0.1,0-0.1,0-0.2,0c0,0-0.1,0.2,0,0.8c0,0.2-0.1,0.4-0.1,0.5
+	C5.7,9.9,5.7,10,5.8,10c0,0,0,0,0,0c0,0,0.2-0.1,0.3-0.2c0.2-0.2,0.5-0.4,0.8-0.5C7.6,9.2,8,8.8,8.2,8.2c0.1-0.4,0.1-0.7-0.1-0.9
+	C7.8,7,7.2,6.8,6.8,6.8C6.9,6.9,7,7.1,7.2,7.2c0.1,0.1,0.1,0.3,0,0.4c-0.1,0.1-0.3,0.1-0.4,0C6,6.9,5.5,5.6,6,4.6
+	c0.2-0.5,0.6-0.9,1.1-1c0.5-0.1,1,0,1.6,0.3c1.5,0.9,1.6,3.4,1.1,4.7c-0.3,0.7-0.5,1.1-1.1,1.7c-0.1,0-0.1,0.1-0.2,0.1
+	c-0.1,0-0.2,0-0.2-0.1c-0.1-0.1-0.1-0.3,0-0.4C8.8,9.5,9,9.1,9.2,8.5c0.5-1.2,0.3-3.3-0.9-4.1C7.9,4.1,7.6,4.1,7.2,4.2
+	C6.9,4.3,6.7,4.5,6.5,4.9c-0.2,0.4-0.2,0.9,0,1.3C7,6.2,8,6.3,8.5,7c0.3,0.4,0.3,0.8,0.2,1.3C8.5,9.2,7.9,9.7,7,9.9
+	c-0.2,0-0.4,0.2-0.5,0.4c-0.2,0.2-0.4,0.4-0.7,0.4c-0.1,0-0.2,0-0.3-0.1C5,10.1,5.2,9.7,5.4,9.4c0-0.1,0.1-0.2,0.1-0.2
+	C5.4,8.7,5.3,8.2,5.6,7.9z"/>
+</svg>
diff --git a/styles/designs/webview/resources/cosmos-culture.svg b/styles/designs/webview/resources/cosmos-culture.svg
new file mode 100644
index 000000000..0aed919e6
--- /dev/null
+++ b/styles/designs/webview/resources/cosmos-culture.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.3.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 15.6 15.9" style="enable-background:new 0 0 15.6 15.9;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#C31427;}
+</style>
+<path class="st0" d="M7.9,0.3C3.6,0.3,0.2,3.7,0.2,8s3.4,7.7,7.7,7.7c4.3,0,7.7-3.4,7.7-7.7S12.1,0.3,7.9,0.3z M8.2,10.3l-0.6,0
+	c-0.5,0-0.9-0.3-0.9-0.8c0,0,0,0,0,0l0-0.3c0-0.4,0.3-0.8,0.7-0.8l0.9-0.1V5.3L5.5,5.9v3.9h0l0,0.2c0,0.6-0.4,1.1-1,1.1l-0.6,0
+	c-0.5,0-0.9-0.3-0.9-0.8c0,0,0,0,0,0L3,10c0-0.4,0.3-0.8,0.7-0.8l0.9-0.1V6V4.3c0-0.2,0.1-0.4,0.3-0.4l3.8-0.7
+	c0.2,0,0.4,0.1,0.5,0.3c0,0,0,0,0,0.1v1V9h0l0,0.2C9.3,9.7,8.8,10.2,8.2,10.3z M12.6,10.5c-0.2,0-0.4-0.2-0.4-0.4
+	c0-0.5-0.1-0.9-0.4-1C11.7,9,11.6,9,11.3,9v2.4c0,0,0,0,0,0c0,0,0,0,0,0.1l0,0.4c0,0.5-0.4,0.9-0.9,0.9l-0.4,0
+	c-0.4,0-0.8-0.3-0.8-0.7c0,0,0,0,0,0l0-0.1c0-0.4,0.3-0.8,0.7-0.8l0.5-0.1v-3h0.4c0.1,0,0.3,0,0.4,0h0v0c0.4,0,0.6,0.1,0.8,0.2
+	C12.8,8.6,13,9.2,13,10C13,10.3,12.8,10.5,12.6,10.5z"/>
+</svg>
diff --git a/styles/designs/webview/resources/cosmos-dreaming.svg b/styles/designs/webview/resources/cosmos-dreaming.svg
new file mode 100644
index 000000000..d02057fe1
--- /dev/null
+++ b/styles/designs/webview/resources/cosmos-dreaming.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.4 15.4"><defs><style>.cls-1{fill:#dcb83d;}</style></defs><path class="cls-1" d="M7.7,0a7.7,7.7,0,1,0,7.7,7.7A7.7,7.7,0,0,0,7.7,0ZM6.84,12.6A.65.65,0,1,1,7.49,12,.65.65,0,0,1,6.84,12.6Zm2-.93a.94.94,0,1,1,.93-.94A.94.94,0,0,1,8.86,11.67ZM11.2,8.3A2,2,0,0,1,8,8.91a1.84,1.84,0,0,1-1.32.54A1.89,1.89,0,0,1,4.94,8.26a2,2,0,0,1-.07-3.79A1.7,1.7,0,0,1,6.45,3.39,1.65,1.65,0,0,1,7.71,4a1.93,1.93,0,0,1,1.36-.56,2,2,0,0,1,1.8,1.19,2,2,0,0,1,1.52,1.9A2,2,0,0,1,11.2,8.3Z" transform="translate(0 0)"/></svg>
\ No newline at end of file
diff --git a/styles/designs/webview/resources/cosmos-kinesthetic.svg b/styles/designs/webview/resources/cosmos-kinesthetic.svg
new file mode 100644
index 000000000..eb40e0809
--- /dev/null
+++ b/styles/designs/webview/resources/cosmos-kinesthetic.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 15.4 15.4" style="enable-background:new 0 0 15.4 15.4;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#38568A;}
+</style>
+<path class="st0" d="M7.7,0C3.4,0,0,3.4,0,7.7s3.4,7.7,7.7,7.7s7.7-3.4,7.7-7.7S12,0,7.7,0z M7.3,2.2c0.6,0,1.1,0.5,1.1,1.1
+	c0,0.6-0.5,1.1-1.1,1.1c-0.6,0-1.1-0.5-1.1-1.1C6.2,2.7,6.7,2.2,7.3,2.2z M10,4.9L9.3,6.3c-0.2,0.4-0.6,0.5-1,0.4L7.9,6.5v0.9
+	l1.4,0.6C9.5,8,9.6,8.1,9.7,8.3c0.2,0.3,0.2,0.6,0,0.9l-1.4,2.2c-0.1,0.2-0.4,0.3-0.6,0.2c-0.1-0.1-0.3-0.2-0.3-0.3
+	c-0.1-0.1-0.1-0.3,0-0.5l0.8-1.7L7.2,9l-0.9,1.5c0,0,0,0-0.1,0.1l-2.4,1.8c-0.1,0.1-0.2,0.1-0.3,0.1c0,0-0.1,0-0.1,0
+	c-0.2,0-0.3-0.1-0.4-0.3c-0.1-0.2,0-0.5,0.2-0.6L5,9.9L6,8V6L5.4,6.3l0.2,1.2c0.1,0.3-0.1,0.6-0.4,0.6C4.9,8.2,4.7,8,4.6,7.7
+	L4.3,6.4C4.2,5.9,4.4,5.5,4.8,5.3l1.2-0.6c0.1-0.1,0.2-0.1,0.3-0.1h1c0.2,0,0.4,0.1,0.5,0.2c0.3,0.3,0.5,0.5,0.6,0.5
+	c0.1-0.2,0.3-0.5,0.5-1c0.1-0.1,0.2-0.2,0.3-0.2c0.1,0,0.3,0,0.4,0.1C10,4.4,10.1,4.6,10,4.9z M11.5,8.3c0,0-0.1,0.1-0.1,0.1
+	c-0.1,0-0.1,0-0.1-0.1c-0.1-0.1-0.1-0.2,0-0.3c0.4-0.4,0.4-1,0-1.4c-0.1-0.1-0.1-0.2,0-0.3c0.1-0.1,0.2-0.1,0.3,0
+	c0.3,0.3,0.4,0.6,0.4,1C11.9,7.7,11.8,8,11.5,8.3z M12.3,9.1c0,0-0.1,0.1-0.1,0.1c-0.1,0-0.1,0-0.1-0.1C12,9,12,8.9,12.1,8.8
+	c0.4-0.4,0.6-0.9,0.6-1.5c0-0.6-0.2-1.1-0.6-1.5c-0.1-0.1-0.1-0.2,0-0.3s0.2-0.1,0.3,0c0.5,0.5,0.7,1.1,0.7,1.8
+	C13.1,8,12.8,8.6,12.3,9.1z"/>
+</svg>
diff --git a/styles/designs/webview/resources/cosmos-linguistic.svg b/styles/designs/webview/resources/cosmos-linguistic.svg
new file mode 100644
index 000000000..324578914
--- /dev/null
+++ b/styles/designs/webview/resources/cosmos-linguistic.svg
@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 15.4 15.4" style="enable-background:new 0 0 15.4 15.4;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#00819A;}
+</style>
+<g>
+	<path class="st0" d="M8.8,8.1c0-0.3-0.1-0.5-0.2-0.7C8.4,7.3,8.2,7.2,7.9,7.2h-1V9H8C8.6,9,8.8,8.7,8.8,8.1z"/>
+	<polygon class="st0" points="3,8.3 4.7,8.3 3.8,5.2 	"/>
+	<path class="st0" d="M8,9.8H6.9v2.3H8c0.3,0,0.6-0.1,0.7-0.3C8.9,11.6,9,11.3,9,11v-0.1c0-0.4-0.1-0.7-0.3-0.8
+		C8.6,9.8,8.3,9.8,8,9.8z"/>
+	<path class="st0" d="M7.7,0C3.4,0,0,3.4,0,7.7s3.4,7.7,7.7,7.7s7.7-3.4,7.7-7.7S12,0,7.7,0z M13.3,8.4c-0.1,0.2-0.2,0.4-0.4,0.5
+		c-0.2,0.1-0.4,0.3-0.6,0.3c-0.2,0.1-0.5,0.1-0.8,0.1s-0.5,0-0.8-0.1c-0.2-0.1-0.4-0.2-0.6-0.3C10,8.8,9.8,8.6,9.7,8.4
+		c0,0.1-0.1,0.3-0.1,0.4C9.5,9,9.3,9.2,9.1,9.3c0.1,0.1,0.3,0.1,0.4,0.2s0.2,0.2,0.3,0.3c0.1,0.1,0.1,0.3,0.2,0.4
+		c0,0.2,0.1,0.4,0.1,0.6V11c0,0.3,0,0.6-0.1,0.9c-0.1,0.2-0.2,0.4-0.4,0.6c-0.2,0.1-0.3,0.3-0.6,0.3c-0.2,0.1-0.4,0.1-0.7,0.1H6.5
+		c-0.1,0-0.2,0-0.3-0.1s-0.1-0.1-0.1-0.2v-2.2c0,0-0.1,0.1-0.2,0.1c-0.1,0-0.1,0-0.2,0c-0.1,0-0.1,0-0.2,0c-0.1,0-0.1-0.1-0.1-0.2
+		L5,9H2.8l-0.4,1.3c0,0.1-0.1,0.1-0.1,0.2c-0.1,0-0.1,0-0.2,0c-0.1,0-0.1,0-0.2,0c-0.1,0-0.1,0-0.2-0.1c-0.1,0-0.1-0.1-0.1-0.1
+		s-0.1-0.1-0.1-0.2V10l1.8-5.7c0-0.1,0.1-0.2,0.2-0.2C3.6,4,3.7,4,3.9,4C4,4,4.2,4,4.3,4.1c0.1,0.1,0.2,0.1,0.2,0.2l1.5,5V6.8
+		c0-0.1,0-0.2,0.1-0.2c0.1-0.1,0.2-0.1,0.3-0.1H8c0.2,0,0.5,0,0.7,0.1c0.2,0,0.4,0.1,0.6,0.2C9.4,6.9,9.5,7,9.6,7.1V5
+		c0-0.4,0.1-0.7,0.2-0.9c0.1-0.3,0.2-0.5,0.4-0.6c0.2-0.2,0.4-0.3,0.6-0.3c0.2-0.1,0.5-0.1,0.8-0.1s0.6,0,0.8,0.1s0.5,0.2,0.6,0.3
+		c0.2,0.1,0.3,0.3,0.4,0.5s0.1,0.4,0.1,0.6c0,0.2,0,0.3-0.1,0.4c-0.1,0.1-0.2,0.1-0.4,0.1c-0.1,0-0.3,0-0.3-0.1s-0.1-0.1-0.1-0.2
+		c0-0.1,0-0.2,0-0.3s-0.1-0.2-0.1-0.3c-0.1-0.1-0.2-0.2-0.3-0.3c-0.1-0.1-0.3-0.1-0.5-0.1c-0.3,0-0.6,0.1-0.8,0.3
+		c-0.2,0.2-0.3,0.5-0.3,0.9v2.6c0,0.4,0.1,0.7,0.3,0.9c0.2,0.2,0.5,0.3,0.8,0.3c0.2,0,0.4,0,0.5-0.1s0.2-0.2,0.3-0.3
+		c0.1-0.1,0.1-0.2,0.1-0.3c0-0.1,0-0.2,0-0.3c0-0.1,0.1-0.2,0.1-0.2c0.1,0,0.2-0.1,0.3-0.1c0.2,0,0.3,0,0.4,0.1s0.1,0.2,0.1,0.4
+		C13.5,8,13.4,8.2,13.3,8.4z"/>
+</g>
+</svg>
diff --git a/styles/designs/webview/resources/cosmos-speech.svg b/styles/designs/webview/resources/cosmos-speech.svg
new file mode 100644
index 000000000..f598b6dd7
--- /dev/null
+++ b/styles/designs/webview/resources/cosmos-speech.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 15.4 15.4" style="enable-background:new 0 0 15.4 15.4;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#9028A3;}
+</style>
+<path class="st0" d="M7.7,0C3.4,0,0,3.4,0,7.7s3.4,7.7,7.7,7.7s7.7-3.4,7.7-7.7S12,0,7.7,0z M12.3,5.9v3.5c0,0.6-0.5,1-1,1H7.4
+	L6,11.8l-0.6,0.6v-1.9H4.3c-0.1,0-0.3,0-0.4-0.1c-0.1,0-0.1-0.1-0.2-0.1c-0.1,0-0.1-0.1-0.2-0.1C3.5,10.1,3.5,10,3.4,10
+	c0,0,0-0.1,0-0.1c0-0.1-0.1-0.1-0.1-0.2c0-0.1,0-0.1,0-0.2v-4c0-0.1,0-0.1,0-0.2c0-0.1,0-0.1,0.1-0.2c0,0,0-0.1,0-0.1
+	c0.1-0.1,0.1-0.2,0.2-0.2c0.1-0.1,0.1-0.1,0.2-0.1c0.1,0,0.1-0.1,0.2-0.1C4,4.5,4.2,4.4,4.3,4.4h7c0.1,0,0.3,0,0.4,0.1
+	c0.1,0,0.1,0.1,0.2,0.1c0.1,0,0.1,0.1,0.2,0.1C12,4.8,12.1,4.9,12.2,5c0,0,0,0.1,0,0.1c0,0.1,0.1,0.1,0.1,0.2c0,0.1,0,0.1,0,0.2V5.9
+	z"/>
+</svg>
diff --git a/styles/designs/webview/resources/cosmos-visual.svg b/styles/designs/webview/resources/cosmos-visual.svg
new file mode 100644
index 000000000..a25c6a812
--- /dev/null
+++ b/styles/designs/webview/resources/cosmos-visual.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 15.4 15.4" style="enable-background:new 0 0 15.4 15.4;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#1E9575;}
+</style>
+<g>
+	<path class="st0" d="M3.1,7.6c0.3,0.3,1.1,1.1,2.1,1.7C5,8.8,4.8,8.3,4.8,7.7C4.8,7.1,5,6.5,5.3,6C4.4,6.5,3.7,7.1,3.1,7.6z"/>
+	<path class="st0" d="M10.8,7.7c0,0.6-0.2,1.1-0.4,1.5c1-0.6,1.8-1.4,2.1-1.7c-0.5-0.5-1.3-1.1-2.2-1.5C10.6,6.5,10.8,7.1,10.8,7.7z
+		"/>
+	<path class="st0" d="M7.8,5.4c-1.3,0-2.3,1-2.3,2.3c0,1.3,1,2.3,2.3,2.3c1.3,0,2.3-1,2.3-2.3C10.1,6.4,9.1,5.4,7.8,5.4z M9.6,7.7
+		c0,1-0.8,1.9-1.9,1.9c-1,0-1.9-0.8-1.9-1.9c0-1,0.8-1.9,1.9-1.9c0.2,0,0.4,0,0.6,0.1C8.1,6.1,7.9,6.4,7.9,6.7
+		c0,0.5,0.4,0.9,0.9,0.9c0.3,0,0.6-0.2,0.8-0.5C9.6,7.3,9.6,7.5,9.6,7.7z"/>
+	<path class="st0" d="M7.7,0C3.4,0,0,3.4,0,7.7s3.4,7.7,7.7,7.7s7.7-3.4,7.7-7.7S12,0,7.7,0z M13.6,8.6c-0.1,0-0.2,0-0.3-0.1
+		c0,0-0.1-0.2-0.4-0.4c-0.6,0.7-2.7,2.7-5.2,2.7S3.2,8.7,2.6,8C2.4,8.3,2.2,8.4,2.2,8.5c-0.1,0.1-0.3,0.2-0.5,0
+		C1.6,8.4,1.6,8.2,1.7,8c0.1-0.1,2.7-3.3,6.1-3.3c3.3,0,6,3.2,6.1,3.3c0.1,0.1,0.1,0.4,0,0.5C13.8,8.6,13.7,8.6,13.6,8.6z"/>
+</g>
+</svg>
diff --git a/styles/output/webview-generic.css b/styles/output/webview-generic.css
index e188c0a81..55647e2b6 100644
--- a/styles/output/webview-generic.css
+++ b/styles/output/webview-generic.css
@@ -2251,6 +2251,74 @@ p.student-sample {
   color: #0074BC;
 }
 
+p.annotation > .os-icons {
+  display: flex;
+  float: left;
+}
+
+span.culture-icon {
+  height: 2rem;
+  width: 2rem;
+  background: url("https://raw.githubusercontent.com/openstax/rex-web/main/public/static/icons/cosmos-culture.svg") no-repeat top left;
+  content: '';
+  background-repeat: no-repeat;
+  margin: 0.15rem 1rem 0.15rem 0;
+}
+
+span.linguistic-icon {
+  height: 2rem;
+  width: 2rem;
+  background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI1LjIuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAxNS40IDE1LjQiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDE1LjQgMTUuNDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPgoJLnN0MHtmaWxsOiMwMDgxOUE7fQo8L3N0eWxlPgo8Zz4KCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik04LjgsOC4xYzAtMC4zLTAuMS0wLjUtMC4yLTAuN0M4LjQsNy4zLDguMiw3LjIsNy45LDcuMmgtMVY5SDhDOC42LDksOC44LDguNyw4LjgsOC4xeiIvPgoJPHBvbHlnb24gY2xhc3M9InN0MCIgcG9pbnRzPSIzLDguMyA0LjcsOC4zIDMuOCw1LjIgCSIvPgoJPHBhdGggY2xhc3M9InN0MCIgZD0iTTgsOS44SDYuOXYyLjNIOGMwLjMsMCwwLjYtMC4xLDAuNy0wLjNDOC45LDExLjYsOSwxMS4zLDksMTF2LTAuMWMwLTAuNC0wLjEtMC43LTAuMy0wLjgKCQlDOC42LDkuOCw4LjMsOS44LDgsOS44eiIvPgoJPHBhdGggY2xhc3M9InN0MCIgZD0iTTcuNywwQzMuNCwwLDAsMy40LDAsNy43czMuNCw3LjcsNy43LDcuN3M3LjctMy40LDcuNy03LjdTMTIsMCw3LjcsMHogTTEzLjMsOC40Yy0wLjEsMC4yLTAuMiwwLjQtMC40LDAuNQoJCWMtMC4yLDAuMS0wLjQsMC4zLTAuNiwwLjNjLTAuMiwwLjEtMC41LDAuMS0wLjgsMC4xcy0wLjUsMC0wLjgtMC4xYy0wLjItMC4xLTAuNC0wLjItMC42LTAuM0MxMCw4LjgsOS44LDguNiw5LjcsOC40CgkJYzAsMC4xLTAuMSwwLjMtMC4xLDAuNEM5LjUsOSw5LjMsOS4yLDkuMSw5LjNjMC4xLDAuMSwwLjMsMC4xLDAuNCwwLjJzMC4yLDAuMiwwLjMsMC4zYzAuMSwwLjEsMC4xLDAuMywwLjIsMC40CgkJYzAsMC4yLDAuMSwwLjQsMC4xLDAuNlYxMWMwLDAuMywwLDAuNi0wLjEsMC45Yy0wLjEsMC4yLTAuMiwwLjQtMC40LDAuNmMtMC4yLDAuMS0wLjMsMC4zLTAuNiwwLjNjLTAuMiwwLjEtMC40LDAuMS0wLjcsMC4xSDYuNQoJCWMtMC4xLDAtMC4yLDAtMC4zLTAuMXMtMC4xLTAuMS0wLjEtMC4ydi0yLjJjMCwwLTAuMSwwLjEtMC4yLDAuMWMtMC4xLDAtMC4xLDAtMC4yLDBjLTAuMSwwLTAuMSwwLTAuMiwwYy0wLjEsMC0wLjEtMC4xLTAuMS0wLjIKCQlMNSw5SDIuOGwtMC40LDEuM2MwLDAuMS0wLjEsMC4xLTAuMSwwLjJjLTAuMSwwLTAuMSwwLTAuMiwwYy0wLjEsMC0wLjEsMC0wLjIsMGMtMC4xLDAtMC4xLDAtMC4yLTAuMWMtMC4xLDAtMC4xLTAuMS0wLjEtMC4xCgkJcy0wLjEtMC4xLTAuMS0wLjJWMTBsMS44LTUuN2MwLTAuMSwwLjEtMC4yLDAuMi0wLjJDMy42LDQsMy43LDQsMy45LDRDNCw0LDQuMiw0LDQuMyw0LjFjMC4xLDAuMSwwLjIsMC4xLDAuMiwwLjJsMS41LDVWNi44CgkJYzAtMC4xLDAtMC4yLDAuMS0wLjJjMC4xLTAuMSwwLjItMC4xLDAuMy0wLjFIOGMwLjIsMCwwLjUsMCwwLjcsMC4xYzAuMiwwLDAuNCwwLjEsMC42LDAuMkM5LjQsNi45LDkuNSw3LDkuNiw3LjFWNQoJCWMwLTAuNCwwLjEtMC43LDAuMi0wLjljMC4xLTAuMywwLjItMC41LDAuNC0wLjZjMC4yLTAuMiwwLjQtMC4zLDAuNi0wLjNjMC4yLTAuMSwwLjUtMC4xLDAuOC0wLjFzMC42LDAsMC44LDAuMXMwLjUsMC4yLDAuNiwwLjMKCQljMC4yLDAuMSwwLjMsMC4zLDAuNCwwLjVzMC4xLDAuNCwwLjEsMC42YzAsMC4yLDAsMC4zLTAuMSwwLjRjLTAuMSwwLjEtMC4yLDAuMS0wLjQsMC4xYy0wLjEsMC0wLjMsMC0wLjMtMC4xcy0wLjEtMC4xLTAuMS0wLjIKCQljMC0wLjEsMC0wLjIsMC0wLjNzLTAuMS0wLjItMC4xLTAuM2MtMC4xLTAuMS0wLjItMC4yLTAuMy0wLjNjLTAuMS0wLjEtMC4zLTAuMS0wLjUtMC4xYy0wLjMsMC0wLjYsMC4xLTAuOCwwLjMKCQljLTAuMiwwLjItMC4zLDAuNS0wLjMsMC45djIuNmMwLDAuNCwwLjEsMC43LDAuMywwLjljMC4yLDAuMiwwLjUsMC4zLDAuOCwwLjNjMC4yLDAsMC40LDAsMC41LTAuMXMwLjItMC4yLDAuMy0wLjMKCQljMC4xLTAuMSwwLjEtMC4yLDAuMS0wLjNjMC0wLjEsMC0wLjIsMC0wLjNjMC0wLjEsMC4xLTAuMiwwLjEtMC4yYzAuMSwwLDAuMi0wLjEsMC4zLTAuMWMwLjIsMCwwLjMsMCwwLjQsMC4xczAuMSwwLjIsMC4xLDAuNAoJCUMxMy41LDgsMTMuNCw4LjIsMTMuMyw4LjR6Ii8+CjwvZz4KPC9zdmc+Cg==") no-repeat top left;
+  content: '';
+  background-repeat: no-repeat;
+  margin: 0.15rem 1rem 0.15rem 0;
+}
+
+span.dreaming-icon {
+  height: 2rem;
+  width: 2rem;
+  background: url("data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNS40IDE1LjQiPjxkZWZzPjxzdHlsZT4uY2xzLTF7ZmlsbDojZGNiODNkO308L3N0eWxlPjwvZGVmcz48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik03LjcsMGE3LjcsNy43LDAsMSwwLDcuNyw3LjdBNy43LDcuNywwLDAsMCw3LjcsMFpNNi44NCwxMi42QS42NS42NSwwLDEsMSw3LjQ5LDEyLC42NS42NSwwLDAsMSw2Ljg0LDEyLjZabTItLjkzYS45NC45NCwwLDEsMSwuOTMtLjk0QS45NC45NCwwLDAsMSw4Ljg2LDExLjY3Wk0xMS4yLDguM0EyLDIsMCwwLDEsOCw4LjkxYTEuODQsMS44NCwwLDAsMS0xLjMyLjU0QTEuODksMS44OSwwLDAsMSw0Ljk0LDguMjZhMiwyLDAsMCwxLS4wNy0zLjc5QTEuNywxLjcsMCwwLDEsNi40NSwzLjM5LDEuNjUsMS42NSwwLDAsMSw3LjcxLDRhMS45MywxLjkzLDAsMCwxLDEuMzYtLjU2LDIsMiwwLDAsMSwxLjgsMS4xOSwyLDIsMCwwLDEsMS41MiwxLjlBMiwyLDAsMCwxLDExLjIsOC4zWiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAwKSIvPjwvc3ZnPg==") no-repeat top left;
+  content: '';
+  background-repeat: no-repeat;
+  margin: 0.15rem 1rem 0.15rem 0;
+}
+
+span.visual-icon {
+  height: 2rem;
+  width: 2rem;
+  background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI1LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAxNS40IDE1LjQiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDE1LjQgMTUuNDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPgoJLnN0MHtmaWxsOiMxRTk1NzU7fQo8L3N0eWxlPgo8Zz4KCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0zLjEsNy42YzAuMywwLjMsMS4xLDEuMSwyLjEsMS43QzUsOC44LDQuOCw4LjMsNC44LDcuN0M0LjgsNy4xLDUsNi41LDUuMyw2QzQuNCw2LjUsMy43LDcuMSwzLjEsNy42eiIvPgoJPHBhdGggY2xhc3M9InN0MCIgZD0iTTEwLjgsNy43YzAsMC42LTAuMiwxLjEtMC40LDEuNWMxLTAuNiwxLjgtMS40LDIuMS0xLjdjLTAuNS0wLjUtMS4zLTEuMS0yLjItMS41QzEwLjYsNi41LDEwLjgsNy4xLDEwLjgsNy43egoJCSIvPgoJPHBhdGggY2xhc3M9InN0MCIgZD0iTTcuOCw1LjRjLTEuMywwLTIuMywxLTIuMywyLjNjMCwxLjMsMSwyLjMsMi4zLDIuM2MxLjMsMCwyLjMtMSwyLjMtMi4zQzEwLjEsNi40LDkuMSw1LjQsNy44LDUuNHogTTkuNiw3LjcKCQljMCwxLTAuOCwxLjktMS45LDEuOWMtMSwwLTEuOS0wLjgtMS45LTEuOWMwLTEsMC44LTEuOSwxLjktMS45YzAuMiwwLDAuNCwwLDAuNiwwLjFDOC4xLDYuMSw3LjksNi40LDcuOSw2LjcKCQljMCwwLjUsMC40LDAuOSwwLjksMC45YzAuMywwLDAuNi0wLjIsMC44LTAuNUM5LjYsNy4zLDkuNiw3LjUsOS42LDcuN3oiLz4KCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik03LjcsMEMzLjQsMCwwLDMuNCwwLDcuN3MzLjQsNy43LDcuNyw3LjdzNy43LTMuNCw3LjctNy43UzEyLDAsNy43LDB6IE0xMy42LDguNmMtMC4xLDAtMC4yLDAtMC4zLTAuMQoJCWMwLDAtMC4xLTAuMi0wLjQtMC40Yy0wLjYsMC43LTIuNywyLjctNS4yLDIuN1MzLjIsOC43LDIuNiw4QzIuNCw4LjMsMi4yLDguNCwyLjIsOC41Yy0wLjEsMC4xLTAuMywwLjItMC41LDAKCQlDMS42LDguNCwxLjYsOC4yLDEuNyw4YzAuMS0wLjEsMi43LTMuMyw2LjEtMy4zYzMuMywwLDYsMy4yLDYuMSwzLjNjMC4xLDAuMSwwLjEsMC40LDAsMC41QzEzLjgsOC42LDEzLjcsOC42LDEzLjYsOC42eiIvPgo8L2c+Cjwvc3ZnPgo=") no-repeat top left;
+  content: '';
+  background-repeat: no-repeat;
+  margin: 0.15rem 1rem 0.15rem 0;
+}
+
+span.speech-icon {
+  height: 2rem;
+  width: 2rem;
+  background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI1LjIuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAxNS40IDE1LjQiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDE1LjQgMTUuNDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPgoJLnN0MHtmaWxsOiM5MDI4QTM7fQo8L3N0eWxlPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNy43LDBDMy40LDAsMCwzLjQsMCw3LjdzMy40LDcuNyw3LjcsNy43czcuNy0zLjQsNy43LTcuN1MxMiwwLDcuNywweiBNMTIuMyw1Ljl2My41YzAsMC42LTAuNSwxLTEsMUg3LjQKCUw2LDExLjhsLTAuNiwwLjZ2LTEuOUg0LjNjLTAuMSwwLTAuMywwLTAuNC0wLjFjLTAuMSwwLTAuMS0wLjEtMC4yLTAuMWMtMC4xLDAtMC4xLTAuMS0wLjItMC4xQzMuNSwxMC4xLDMuNSwxMCwzLjQsMTAKCWMwLDAsMC0wLjEsMC0wLjFjMC0wLjEtMC4xLTAuMS0wLjEtMC4yYzAtMC4xLDAtMC4xLDAtMC4ydi00YzAtMC4xLDAtMC4xLDAtMC4yYzAtMC4xLDAtMC4xLDAuMS0wLjJjMCwwLDAtMC4xLDAtMC4xCgljMC4xLTAuMSwwLjEtMC4yLDAuMi0wLjJjMC4xLTAuMSwwLjEtMC4xLDAuMi0wLjFjMC4xLDAsMC4xLTAuMSwwLjItMC4xQzQsNC41LDQuMiw0LjQsNC4zLDQuNGg3YzAuMSwwLDAuMywwLDAuNCwwLjEKCWMwLjEsMCwwLjEsMC4xLDAuMiwwLjFjMC4xLDAsMC4xLDAuMSwwLjIsMC4xQzEyLDQuOCwxMi4xLDQuOSwxMi4yLDVjMCwwLDAsMC4xLDAsMC4xYzAsMC4xLDAuMSwwLjEsMC4xLDAuMmMwLDAuMSwwLDAuMSwwLDAuMlY1LjkKCXoiLz4KPC9zdmc+Cg==") no-repeat top left;
+  content: '';
+  background-repeat: no-repeat;
+  margin: 0.15rem 1rem 0.15rem 0;
+}
+
+span.auditory-icon {
+  height: 2rem;
+  width: 2rem;
+  background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI1LjIuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAxNS40IDE1LjQiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDE1LjQgMTUuNDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPgoJLnN0MHtmaWxsOiNGMzc1NDE7fQo8L3N0eWxlPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNy43LDBDMy40LDAsMCwzLjQsMCw3LjdzMy40LDcuNyw3LjcsNy43czcuNy0zLjQsNy43LTcuN1MxMiwwLDcuNywweiBNOS42LDExLjFsLTAuMSwwLjJjLTAuOSwxLTEuNywyLTIuNywyCgljLTAuMSwwLTAuMiwwLTAuMywwQzQuOSwxMyw0LjYsMTEuNyw0LjYsMTFjMC0wLjIsMC4xLTAuMywwLjMtMC4zYzAuMSwwLDAuMywwLjEsMC4zLDAuM2MwLDAuMSwwLDEuNSwxLjMsMS44CglDNy40LDEyLjksOC4xLDEyLDksMTAuOWwwLjEtMC4yYzEtMS4zLDEuNS0yLjQsMS41LTMuOGMwLTEuOC0wLjktMy43LTIuOC0zLjlDNy4xLDIuOSw2LjQsMy4xLDUuOSwzLjZjLTAuNiwwLjYtMC43LDEuNS0wLjYsMgoJYzAsMC4xLTAuMSwwLjMtMC4yLDAuM0M1LDYsNC44LDUuOSw0LjgsNS43QzQuNiw1LjEsNC45LDQsNS41LDMuM2MwLjQtMC41LDEuMi0xLDIuNC0wLjhDMTAuMiwyLjgsMTEuMiw1LDExLjIsNwoJQzExLjIsOC41LDEwLjcsOS44LDkuNiwxMS4xeiBNNS42LDcuOUM1LjgsNy44LDYsNy43LDYuMyw3LjhjMC4zLDAuMSwwLjUsMC4zLDAuNiwwLjZDNyw4LjYsNi45LDguOSw2LjcsOUM2LjYsOS4xLDYuNCw5LjEsNi4zLDkKCWMtMC4xLTAuMS0wLjEtMC4zLDAtMC40YzAsMCwwLTAuMSwwLTAuMWMwLTAuMS0wLjEtMC4xLTAuMi0wLjJjLTAuMSwwLTAuMSwwLTAuMiwwYzAsMC0wLjEsMC4yLDAsMC44YzAsMC4yLTAuMSwwLjQtMC4xLDAuNQoJQzUuNyw5LjksNS43LDEwLDUuOCwxMGMwLDAsMCwwLDAsMGMwLDAsMC4yLTAuMSwwLjMtMC4yYzAuMi0wLjIsMC41LTAuNCwwLjgtMC41QzcuNiw5LjIsOCw4LjgsOC4yLDguMmMwLjEtMC40LDAuMS0wLjctMC4xLTAuOQoJQzcuOCw3LDcuMiw2LjgsNi44LDYuOEM2LjksNi45LDcsNy4xLDcuMiw3LjJjMC4xLDAuMSwwLjEsMC4zLDAsMC40Yy0wLjEsMC4xLTAuMywwLjEtMC40LDBDNiw2LjksNS41LDUuNiw2LDQuNgoJYzAuMi0wLjUsMC42LTAuOSwxLjEtMWMwLjUtMC4xLDEsMCwxLjYsMC4zYzEuNSwwLjksMS42LDMuNCwxLjEsNC43Yy0wLjMsMC43LTAuNSwxLjEtMS4xLDEuN2MtMC4xLDAtMC4xLDAuMS0wLjIsMC4xCgljLTAuMSwwLTAuMiwwLTAuMi0wLjFjLTAuMS0wLjEtMC4xLTAuMywwLTAuNEM4LjgsOS41LDksOS4xLDkuMiw4LjVjMC41LTEuMiwwLjMtMy4zLTAuOS00LjFDNy45LDQuMSw3LjYsNC4xLDcuMiw0LjIKCUM2LjksNC4zLDYuNyw0LjUsNi41LDQuOWMtMC4yLDAuNC0wLjIsMC45LDAsMS4zQzcsNi4yLDgsNi4zLDguNSw3YzAuMywwLjQsMC4zLDAuOCwwLjIsMS4zQzguNSw5LjIsNy45LDkuNyw3LDkuOQoJYy0wLjIsMC0wLjQsMC4yLTAuNSwwLjRjLTAuMiwwLjItMC40LDAuNC0wLjcsMC40Yy0wLjEsMC0wLjIsMC0wLjMtMC4xQzUsMTAuMSw1LjIsOS43LDUuNCw5LjRjMC0wLjEsMC4xLTAuMiwwLjEtMC4yCglDNS40LDguNyw1LjMsOC4yLDUuNiw3Ljl6Ii8+Cjwvc3ZnPgo=") no-repeat top left;
+  content: '';
+  background-repeat: no-repeat;
+  margin: 0.15rem 1rem 0.15rem 0;
+}
+
+span.kinesthetic-icon {
+  height: 2rem;
+  width: 2rem;
+  background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI1LjIuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAxNS40IDE1LjQiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDE1LjQgMTUuNDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPgoJLnN0MHtmaWxsOiMzODU2OEE7fQo8L3N0eWxlPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNy43LDBDMy40LDAsMCwzLjQsMCw3LjdzMy40LDcuNyw3LjcsNy43czcuNy0zLjQsNy43LTcuN1MxMiwwLDcuNywweiBNNy4zLDIuMmMwLjYsMCwxLjEsMC41LDEuMSwxLjEKCWMwLDAuNi0wLjUsMS4xLTEuMSwxLjFjLTAuNiwwLTEuMS0wLjUtMS4xLTEuMUM2LjIsMi43LDYuNywyLjIsNy4zLDIuMnogTTEwLDQuOUw5LjMsNi4zYy0wLjIsMC40LTAuNiwwLjUtMSwwLjRMNy45LDYuNXYwLjkKCWwxLjQsMC42QzkuNSw4LDkuNiw4LjEsOS43LDguM2MwLjIsMC4zLDAuMiwwLjYsMCwwLjlsLTEuNCwyLjJjLTAuMSwwLjItMC40LDAuMy0wLjYsMC4yYy0wLjEtMC4xLTAuMy0wLjItMC4zLTAuMwoJYy0wLjEtMC4xLTAuMS0wLjMsMC0wLjVsMC44LTEuN0w3LjIsOWwtMC45LDEuNWMwLDAsMCwwLTAuMSwwLjFsLTIuNCwxLjhjLTAuMSwwLjEtMC4yLDAuMS0wLjMsMC4xYzAsMC0wLjEsMC0wLjEsMAoJYy0wLjIsMC0wLjMtMC4xLTAuNC0wLjNjLTAuMS0wLjIsMC0wLjUsMC4yLTAuNkw1LDkuOUw2LDhWNkw1LjQsNi4zbDAuMiwxLjJjMC4xLDAuMy0wLjEsMC42LTAuNCwwLjZDNC45LDguMiw0LjcsOCw0LjYsNy43CglMNC4zLDYuNEM0LjIsNS45LDQuNCw1LjUsNC44LDUuM2wxLjItMC42YzAuMS0wLjEsMC4yLTAuMSwwLjMtMC4xaDFjMC4yLDAsMC40LDAuMSwwLjUsMC4yYzAuMywwLjMsMC41LDAuNSwwLjYsMC41CgljMC4xLTAuMiwwLjMtMC41LDAuNS0xYzAuMS0wLjEsMC4yLTAuMiwwLjMtMC4yYzAuMSwwLDAuMywwLDAuNCwwLjFDMTAsNC40LDEwLjEsNC42LDEwLDQuOXogTTExLjUsOC4zYzAsMC0wLjEsMC4xLTAuMSwwLjEKCWMtMC4xLDAtMC4xLDAtMC4xLTAuMWMtMC4xLTAuMS0wLjEtMC4yLDAtMC4zYzAuNC0wLjQsMC40LTEsMC0xLjRjLTAuMS0wLjEtMC4xLTAuMiwwLTAuM2MwLjEtMC4xLDAuMi0wLjEsMC4zLDAKCWMwLjMsMC4zLDAuNCwwLjYsMC40LDFDMTEuOSw3LjcsMTEuOCw4LDExLjUsOC4zeiBNMTIuMyw5LjFjMCwwLTAuMSwwLjEtMC4xLDAuMWMtMC4xLDAtMC4xLDAtMC4xLTAuMUMxMiw5LDEyLDguOSwxMi4xLDguOAoJYzAuNC0wLjQsMC42LTAuOSwwLjYtMS41YzAtMC42LTAuMi0xLjEtMC42LTEuNWMtMC4xLTAuMS0wLjEtMC4yLDAtMC4zczAuMi0wLjEsMC4zLDBjMC41LDAuNSwwLjcsMS4xLDAuNywxLjgKCUMxMy4xLDgsMTIuOCw4LjYsMTIuMyw5LjF6Ii8+Cjwvc3ZnPgo=") no-repeat top left;
+  content: '';
+  background-repeat: no-repeat;
+  margin: 0.15rem 1rem 0.15rem 0;
+}
+
 section.works-cited [data-type=title] {
   text-align: center;
 }