diff --git a/developer_manual/design/html.rst b/developer_manual/design/html.rst
index 43dd724e0..8fb819848 100644
--- a/developer_manual/design/html.rst
+++ b/developer_manual/design/html.rst
@@ -5,3 +5,73 @@
 ===============
 Html elements
 ===============
+
+Progress bar
+=============
+
+Nextcloud support and provides an already themed progress bar.
+
+Please use the html5 ``progress`` element.
+
+.. figure:: ../images/progress.png
+   :alt: Progress html5
+   :figclass: figure-with-code
+
+.. code-block:: html
+
+    <progress value="42.79" max="100"></progress>
+
+Checkboxes and radios
+======================
+
+As default html5 checkboxes & radios are **not** customisable, we created an override using label and ``::after`` elements.
+
+There is 2 colors:
+
+* Default themed with the primary color.
+* White colored.
+
+Requirements:
+
+* You need to have a ``label`` element **directly** after the ``input`` element.
+* The input **must** have the ``checkbox`` or ``radio`` class.
+* To use the white theme, you **need** to also add the ``checkbox--white`` or ``radio--white`` class.
+* Your label **must** have an associated text for accessibility.
+
+.. figure:: ../images/checkboxes.png
+   :alt: Nextcloud's themed checkboxes
+   :figclass: figure-with-code
+
+.. code-block:: html
+
+    <input type="checkbox" id="test1" class="checkbox"
+           checked="checked">
+    <label for="test1">Selected</label><br>
+    <input type="checkbox" id="test2" class="checkbox">
+    <label for="test2">Unselected</label><br>
+    <input type="checkbox" id="test3" class="checkbox"
+           disabled="disabled">
+    <label for="test3">Disabled</label><br>
+    <input type="checkbox" id="test4" class="checkbox">
+    <label for="test4">Hovered</label><br>
+
+.. figure:: ../images/radios.png
+   :alt: Nextcloud's themed radios
+   :figclass: figure-with-code
+
+.. code-block:: html
+
+    <input type="radio" id="test1" class="radio"
+           checked="checked">
+    <label for="test1">Selected</label><br>
+    <input type="radio" id="test2" class="radio">
+    <label for="test2">Unselected</label><br>
+    <input type="radio" id="test3" class="radio"
+           disabled="disabled">
+    <label for="test3">Disabled</label><br>
+    <input type="radio" id="test4" class="radio">
+    <label for="test4">Hovered</label><br>
+
+
+Buttons
+==================
diff --git a/developer_manual/design/icons.rst b/developer_manual/design/icons.rst
new file mode 100644
index 000000000..aaa0641bd
--- /dev/null
+++ b/developer_manual/design/icons.rst
@@ -0,0 +1,7 @@
+.. sectionauthor:: John Molakvoæ <skjnldsv@protonmail.com>
+.. codeauthor:: John Molakvoæ <skjnldsv@protonmail.com>
+..  _icons:
+
+========
+Icons
+========
diff --git a/developer_manual/design/index.rst b/developer_manual/design/index.rst
index 17a8e1b27..113650a73 100644
--- a/developer_manual/design/index.rst
+++ b/developer_manual/design/index.rst
@@ -10,3 +10,4 @@ Design Guidelines
    content
    popovermenu
    html
+   icons
diff --git a/developer_manual/images/checkboxes.png b/developer_manual/images/checkboxes.png
new file mode 100644
index 000000000..5567c21ba
Binary files /dev/null and b/developer_manual/images/checkboxes.png differ
diff --git a/developer_manual/images/progress.png b/developer_manual/images/progress.png
new file mode 100644
index 000000000..b1373ac9d
Binary files /dev/null and b/developer_manual/images/progress.png differ
diff --git a/developer_manual/images/radios.png b/developer_manual/images/radios.png
new file mode 100644
index 000000000..a3f0e2aee
Binary files /dev/null and b/developer_manual/images/radios.png differ