diff --git a/avatar/avatar.css b/avatar/avatar.css
new file mode 100644
index 0000000..b836249
--- /dev/null
+++ b/avatar/avatar.css
@@ -0,0 +1,24 @@
+@import url(../style.css);
+
+.avatar {
+ height: 32px;
+ width: 32px;
+}
+
+.avatar-xl {
+ height: 48px;
+ width: 48px;
+}
+
+.avatar-xxl {
+ height: 64px;
+ width: 64px;
+}
+
+.avatar-round {
+ border-radius: 50%;
+}
+
+.avatar-square {
+ border-radius: 10%;
+}
\ No newline at end of file
diff --git a/avatar/avatar.html b/avatar/avatar.html
new file mode 100644
index 0000000..c40f804
--- /dev/null
+++ b/avatar/avatar.html
@@ -0,0 +1,24 @@
+
+
+
+ avatar
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/badge/avatar.svg b/badge/avatar.svg
new file mode 100644
index 0000000..0686ea1
--- /dev/null
+++ b/badge/avatar.svg
@@ -0,0 +1,102 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/badge/badge.css b/badge/badge.css
new file mode 100644
index 0000000..6b4a642
--- /dev/null
+++ b/badge/badge.css
@@ -0,0 +1,52 @@
+@import url(../style.css);
+@import url(../avatar/avatar.css);
+
+.icon-with-badge {
+ position: relative;
+ width: fit-content;
+}
+
+.badge {
+ position: absolute;
+ top: -0.7rem;
+ right: -0.7rem;
+ color: white;
+ height: 1.25rem;
+ width: 1.5rem;
+ padding: 0.375rem;
+ text-align: center;
+ border-radius: 50%;
+}
+
+.red {
+ background-color: var(--danger);
+}
+
+.blue {
+ background-color: var(--secondary);
+}
+
+.dark-blue {
+ background-color: var(--primary);
+}
+
+.yellow {
+ background-color: var(--warning);
+}
+
+.green {
+ background-color: var(--success);
+}
+
+.avatar-with-badge {
+ position: relative;
+ width: max-content;
+}
+
+.badge-avatar {
+ position: absolute;
+ bottom: 0;
+ right: 0;
+ padding: .375rem;
+ border-radius: 50%;
+}
\ No newline at end of file
diff --git a/badge/badge.html b/badge/badge.html
new file mode 100644
index 0000000..a69a7b5
--- /dev/null
+++ b/badge/badge.html
@@ -0,0 +1,72 @@
+
+
+
+ badge
+
+
+
+
+
5
+
+
+
+
+
13
+
+
+
+
+
2
+
+
+
+
+
13
+
+
+
+
+
56
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+ 5
+