diff --git a/packages/vibrant-icons/assets/icons/ChevronDownCircle/Fill.svg b/packages/vibrant-icons/assets/icons/ChevronDownCircle/Fill.svg
new file mode 100644
index 000000000..90d1a927c
--- /dev/null
+++ b/packages/vibrant-icons/assets/icons/ChevronDownCircle/Fill.svg
@@ -0,0 +1,3 @@
+
diff --git a/packages/vibrant-icons/assets/icons/ChevronDownCircle/Regular.svg b/packages/vibrant-icons/assets/icons/ChevronDownCircle/Regular.svg
new file mode 100644
index 000000000..33d2b2a26
--- /dev/null
+++ b/packages/vibrant-icons/assets/icons/ChevronDownCircle/Regular.svg
@@ -0,0 +1,4 @@
+
diff --git a/packages/vibrant-icons/assets/icons/ChevronDownCircle/Thin.svg b/packages/vibrant-icons/assets/icons/ChevronDownCircle/Thin.svg
new file mode 100644
index 000000000..c09b74e13
--- /dev/null
+++ b/packages/vibrant-icons/assets/icons/ChevronDownCircle/Thin.svg
@@ -0,0 +1,4 @@
+
diff --git a/packages/vibrant-icons/assets/icons/ChevronLeftCircle/Fill.svg b/packages/vibrant-icons/assets/icons/ChevronLeftCircle/Fill.svg
new file mode 100644
index 000000000..79dbc06af
--- /dev/null
+++ b/packages/vibrant-icons/assets/icons/ChevronLeftCircle/Fill.svg
@@ -0,0 +1,3 @@
+
diff --git a/packages/vibrant-icons/assets/icons/ChevronLeftCircle/Regular.svg b/packages/vibrant-icons/assets/icons/ChevronLeftCircle/Regular.svg
new file mode 100644
index 000000000..3a760ed0e
--- /dev/null
+++ b/packages/vibrant-icons/assets/icons/ChevronLeftCircle/Regular.svg
@@ -0,0 +1,4 @@
+
diff --git a/packages/vibrant-icons/assets/icons/ChevronLeftCircle/Thin.svg b/packages/vibrant-icons/assets/icons/ChevronLeftCircle/Thin.svg
new file mode 100644
index 000000000..8409b397a
--- /dev/null
+++ b/packages/vibrant-icons/assets/icons/ChevronLeftCircle/Thin.svg
@@ -0,0 +1,4 @@
+
diff --git a/packages/vibrant-icons/assets/icons/ChevronRightCircle/Fill.svg b/packages/vibrant-icons/assets/icons/ChevronRightCircle/Fill.svg
new file mode 100644
index 000000000..35e0b4dff
--- /dev/null
+++ b/packages/vibrant-icons/assets/icons/ChevronRightCircle/Fill.svg
@@ -0,0 +1,3 @@
+
diff --git a/packages/vibrant-icons/assets/icons/ChevronRightCircle/Regular.svg b/packages/vibrant-icons/assets/icons/ChevronRightCircle/Regular.svg
new file mode 100644
index 000000000..31fc6d1a4
--- /dev/null
+++ b/packages/vibrant-icons/assets/icons/ChevronRightCircle/Regular.svg
@@ -0,0 +1,4 @@
+
diff --git a/packages/vibrant-icons/assets/icons/ChevronRightCircle/Thin.svg b/packages/vibrant-icons/assets/icons/ChevronRightCircle/Thin.svg
new file mode 100644
index 000000000..ecf0ece18
--- /dev/null
+++ b/packages/vibrant-icons/assets/icons/ChevronRightCircle/Thin.svg
@@ -0,0 +1,4 @@
+
diff --git a/packages/vibrant-icons/assets/icons/ChevronUpCircle/Fill.svg b/packages/vibrant-icons/assets/icons/ChevronUpCircle/Fill.svg
new file mode 100644
index 000000000..d7233fe77
--- /dev/null
+++ b/packages/vibrant-icons/assets/icons/ChevronUpCircle/Fill.svg
@@ -0,0 +1,3 @@
+
diff --git a/packages/vibrant-icons/assets/icons/ChevronUpCircle/Regular.svg b/packages/vibrant-icons/assets/icons/ChevronUpCircle/Regular.svg
new file mode 100644
index 000000000..6f2878161
--- /dev/null
+++ b/packages/vibrant-icons/assets/icons/ChevronUpCircle/Regular.svg
@@ -0,0 +1,4 @@
+
diff --git a/packages/vibrant-icons/assets/icons/ChevronUpCircle/Thin.svg b/packages/vibrant-icons/assets/icons/ChevronUpCircle/Thin.svg
new file mode 100644
index 000000000..8871b7cf3
--- /dev/null
+++ b/packages/vibrant-icons/assets/icons/ChevronUpCircle/Thin.svg
@@ -0,0 +1,4 @@
+
diff --git a/packages/vibrant-icons/assets/icons/Sparkle/Fill.svg b/packages/vibrant-icons/assets/icons/Sparkle/Fill.svg
new file mode 100644
index 000000000..7204319d6
--- /dev/null
+++ b/packages/vibrant-icons/assets/icons/Sparkle/Fill.svg
@@ -0,0 +1,5 @@
+
diff --git a/packages/vibrant-icons/assets/icons/Sparkle/Regular.svg b/packages/vibrant-icons/assets/icons/Sparkle/Regular.svg
new file mode 100644
index 000000000..e29d7e433
--- /dev/null
+++ b/packages/vibrant-icons/assets/icons/Sparkle/Regular.svg
@@ -0,0 +1,5 @@
+
diff --git a/packages/vibrant-icons/assets/icons/Sparkle/Thin.svg b/packages/vibrant-icons/assets/icons/Sparkle/Thin.svg
new file mode 100644
index 000000000..14c305fc7
--- /dev/null
+++ b/packages/vibrant-icons/assets/icons/Sparkle/Thin.svg
@@ -0,0 +1,5 @@
+
diff --git a/packages/vibrant-icons/src/lib/Icon/__snapshots__/Icon.spec.tsx.snap b/packages/vibrant-icons/src/lib/Icon/__snapshots__/Icon.spec.tsx.snap
index c5b7d2827..a527ac445 100644
--- a/packages/vibrant-icons/src/lib/Icon/__snapshots__/Icon.spec.tsx.snap
+++ b/packages/vibrant-icons/src/lib/Icon/__snapshots__/Icon.spec.tsx.snap
@@ -7428,6 +7428,182 @@ exports[` when ChevronDown.Thin Icon rendered match snapshot 1`] = `
`;
+exports[` when ChevronDownCircle.Fill Icon rendered match snapshot 1`] = `
+.emotion-0 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-content: stretch;
+ -ms-flex-line-pack: stretch;
+ align-content: stretch;
+ -webkit-flex-shrink: 1;
+ -ms-flex-negative: 1;
+ flex-shrink: 1;
+ -webkit-flex-direction: column;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ box-sizing: border-box;
+ position: relative;
+ width: 24px;
+ height: 24px;
+ fill: #0c0c0c;
+}
+
+.emotion-1 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-content: stretch;
+ -ms-flex-line-pack: stretch;
+ align-content: stretch;
+ -webkit-flex-shrink: 1;
+ -ms-flex-negative: 1;
+ flex-shrink: 1;
+ -webkit-flex-direction: column;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ box-sizing: border-box;
+ position: relative;
+}
+
+
+`;
+
+exports[` when ChevronDownCircle.Regular Icon rendered match snapshot 1`] = `
+.emotion-0 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-content: stretch;
+ -ms-flex-line-pack: stretch;
+ align-content: stretch;
+ -webkit-flex-shrink: 1;
+ -ms-flex-negative: 1;
+ flex-shrink: 1;
+ -webkit-flex-direction: column;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ box-sizing: border-box;
+ position: relative;
+ width: 24px;
+ height: 24px;
+ fill: #0c0c0c;
+}
+
+.emotion-1 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-content: stretch;
+ -ms-flex-line-pack: stretch;
+ align-content: stretch;
+ -webkit-flex-shrink: 1;
+ -ms-flex-negative: 1;
+ flex-shrink: 1;
+ -webkit-flex-direction: column;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ box-sizing: border-box;
+ position: relative;
+}
+
+
+`;
+
+exports[` when ChevronDownCircle.Thin Icon rendered match snapshot 1`] = `
+.emotion-0 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-content: stretch;
+ -ms-flex-line-pack: stretch;
+ align-content: stretch;
+ -webkit-flex-shrink: 1;
+ -ms-flex-negative: 1;
+ flex-shrink: 1;
+ -webkit-flex-direction: column;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ box-sizing: border-box;
+ position: relative;
+ width: 24px;
+ height: 24px;
+ fill: #0c0c0c;
+}
+
+.emotion-1 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-content: stretch;
+ -ms-flex-line-pack: stretch;
+ align-content: stretch;
+ -webkit-flex-shrink: 1;
+ -ms-flex-negative: 1;
+ flex-shrink: 1;
+ -webkit-flex-direction: column;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ box-sizing: border-box;
+ position: relative;
+}
+
+
+`;
+
exports[` when ChevronLeft.Fill Icon rendered match snapshot 1`] = `
.emotion-0 {
display: -webkit-box;
@@ -7471,18 +7647,520 @@ exports[` when ChevronLeft.Fill Icon rendered match snapshot 1`] = `
+`;
+
+exports[` when ChevronLeft.Regular Icon rendered match snapshot 1`] = `
+.emotion-0 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-content: stretch;
+ -ms-flex-line-pack: stretch;
+ align-content: stretch;
+ -webkit-flex-shrink: 1;
+ -ms-flex-negative: 1;
+ flex-shrink: 1;
+ -webkit-flex-direction: column;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ box-sizing: border-box;
+ position: relative;
+ width: 24px;
+ height: 24px;
+ fill: #0c0c0c;
+}
+
+.emotion-1 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-content: stretch;
+ -ms-flex-line-pack: stretch;
+ align-content: stretch;
+ -webkit-flex-shrink: 1;
+ -ms-flex-negative: 1;
+ flex-shrink: 1;
+ -webkit-flex-direction: column;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ box-sizing: border-box;
+ position: relative;
+}
+
+
+`;
+
+exports[` when ChevronLeft.Thin Icon rendered match snapshot 1`] = `
+.emotion-0 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-content: stretch;
+ -ms-flex-line-pack: stretch;
+ align-content: stretch;
+ -webkit-flex-shrink: 1;
+ -ms-flex-negative: 1;
+ flex-shrink: 1;
+ -webkit-flex-direction: column;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ box-sizing: border-box;
+ position: relative;
+ width: 24px;
+ height: 24px;
+ fill: #0c0c0c;
+}
+
+.emotion-1 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-content: stretch;
+ -ms-flex-line-pack: stretch;
+ align-content: stretch;
+ -webkit-flex-shrink: 1;
+ -ms-flex-negative: 1;
+ flex-shrink: 1;
+ -webkit-flex-direction: column;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ box-sizing: border-box;
+ position: relative;
+}
+
+
+`;
+
+exports[` when ChevronLeftCircle.Fill Icon rendered match snapshot 1`] = `
+.emotion-0 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-content: stretch;
+ -ms-flex-line-pack: stretch;
+ align-content: stretch;
+ -webkit-flex-shrink: 1;
+ -ms-flex-negative: 1;
+ flex-shrink: 1;
+ -webkit-flex-direction: column;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ box-sizing: border-box;
+ position: relative;
+ width: 24px;
+ height: 24px;
+ fill: #0c0c0c;
+}
+
+.emotion-1 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-content: stretch;
+ -ms-flex-line-pack: stretch;
+ align-content: stretch;
+ -webkit-flex-shrink: 1;
+ -ms-flex-negative: 1;
+ flex-shrink: 1;
+ -webkit-flex-direction: column;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ box-sizing: border-box;
+ position: relative;
+}
+
+
+`;
+
+exports[` when ChevronLeftCircle.Regular Icon rendered match snapshot 1`] = `
+.emotion-0 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-content: stretch;
+ -ms-flex-line-pack: stretch;
+ align-content: stretch;
+ -webkit-flex-shrink: 1;
+ -ms-flex-negative: 1;
+ flex-shrink: 1;
+ -webkit-flex-direction: column;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ box-sizing: border-box;
+ position: relative;
+ width: 24px;
+ height: 24px;
+ fill: #0c0c0c;
+}
+
+.emotion-1 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-content: stretch;
+ -ms-flex-line-pack: stretch;
+ align-content: stretch;
+ -webkit-flex-shrink: 1;
+ -ms-flex-negative: 1;
+ flex-shrink: 1;
+ -webkit-flex-direction: column;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ box-sizing: border-box;
+ position: relative;
+}
+
+
+`;
+
+exports[` when ChevronLeftCircle.Thin Icon rendered match snapshot 1`] = `
+.emotion-0 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-content: stretch;
+ -ms-flex-line-pack: stretch;
+ align-content: stretch;
+ -webkit-flex-shrink: 1;
+ -ms-flex-negative: 1;
+ flex-shrink: 1;
+ -webkit-flex-direction: column;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ box-sizing: border-box;
+ position: relative;
+ width: 24px;
+ height: 24px;
+ fill: #0c0c0c;
+}
+
+.emotion-1 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-content: stretch;
+ -ms-flex-line-pack: stretch;
+ align-content: stretch;
+ -webkit-flex-shrink: 1;
+ -ms-flex-negative: 1;
+ flex-shrink: 1;
+ -webkit-flex-direction: column;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ box-sizing: border-box;
+ position: relative;
+}
+
+
+`;
+
+exports[` when ChevronRight.Fill Icon rendered match snapshot 1`] = `
+.emotion-0 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-content: stretch;
+ -ms-flex-line-pack: stretch;
+ align-content: stretch;
+ -webkit-flex-shrink: 1;
+ -ms-flex-negative: 1;
+ flex-shrink: 1;
+ -webkit-flex-direction: column;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ box-sizing: border-box;
+ position: relative;
+ width: 24px;
+ height: 24px;
+ fill: #0c0c0c;
+}
+
+.emotion-1 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-content: stretch;
+ -ms-flex-line-pack: stretch;
+ align-content: stretch;
+ -webkit-flex-shrink: 1;
+ -ms-flex-negative: 1;
+ flex-shrink: 1;
+ -webkit-flex-direction: column;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ box-sizing: border-box;
+ position: relative;
+}
+
+
+`;
+
+exports[` when ChevronRight.Regular Icon rendered match snapshot 1`] = `
+.emotion-0 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-content: stretch;
+ -ms-flex-line-pack: stretch;
+ align-content: stretch;
+ -webkit-flex-shrink: 1;
+ -ms-flex-negative: 1;
+ flex-shrink: 1;
+ -webkit-flex-direction: column;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ box-sizing: border-box;
+ position: relative;
+ width: 24px;
+ height: 24px;
+ fill: #0c0c0c;
+}
+
+.emotion-1 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-content: stretch;
+ -ms-flex-line-pack: stretch;
+ align-content: stretch;
+ -webkit-flex-shrink: 1;
+ -ms-flex-negative: 1;
+ flex-shrink: 1;
+ -webkit-flex-direction: column;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ box-sizing: border-box;
+ position: relative;
+}
+
+
+`;
+
+exports[` when ChevronRight.Thin Icon rendered match snapshot 1`] = `
+.emotion-0 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-content: stretch;
+ -ms-flex-line-pack: stretch;
+ align-content: stretch;
+ -webkit-flex-shrink: 1;
+ -ms-flex-negative: 1;
+ flex-shrink: 1;
+ -webkit-flex-direction: column;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ box-sizing: border-box;
+ position: relative;
+ width: 24px;
+ height: 24px;
+ fill: #0c0c0c;
+}
+
+.emotion-1 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-content: stretch;
+ -ms-flex-line-pack: stretch;
+ align-content: stretch;
+ -webkit-flex-shrink: 1;
+ -ms-flex-negative: 1;
+ flex-shrink: 1;
+ -webkit-flex-direction: column;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ box-sizing: border-box;
+ position: relative;
+}
+
+
+`;
+
+exports[` when ChevronRightCircle.Fill Icon rendered match snapshot 1`] = `
+.emotion-0 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-content: stretch;
+ -ms-flex-line-pack: stretch;
+ align-content: stretch;
+ -webkit-flex-shrink: 1;
+ -ms-flex-negative: 1;
+ flex-shrink: 1;
+ -webkit-flex-direction: column;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ box-sizing: border-box;
+ position: relative;
+ width: 24px;
+ height: 24px;
+ fill: #0c0c0c;
+}
+
+.emotion-1 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-content: stretch;
+ -ms-flex-line-pack: stretch;
+ align-content: stretch;
+ -webkit-flex-shrink: 1;
+ -ms-flex-negative: 1;
+ flex-shrink: 1;
+ -webkit-flex-direction: column;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ box-sizing: border-box;
+ position: relative;
+}
+
+
`;
-exports[` when ChevronLeft.Regular Icon rendered match snapshot 1`] = `
+exports[` when ChevronRightCircle.Regular Icon rendered match snapshot 1`] = `
.emotion-0 {
display: -webkit-box;
display: -webkit-flex;
@@ -7525,18 +8203,24 @@ exports[` when ChevronLeft.Regular Icon rendered match snapshot 1`] = `
`;
-exports[` when ChevronLeft.Thin Icon rendered match snapshot 1`] = `
+exports[` when ChevronRightCircle.Thin Icon rendered match snapshot 1`] = `
.emotion-0 {
display: -webkit-box;
display: -webkit-flex;
@@ -7579,18 +8263,24 @@ exports[` when ChevronLeft.Thin Icon rendered match snapshot 1`] = `
`;
-exports[` when ChevronRight.Fill Icon rendered match snapshot 1`] = `
+exports[` when ChevronUp.Fill Icon rendered match snapshot 1`] = `
.emotion-0 {
display: -webkit-box;
display: -webkit-flex;
@@ -7633,18 +8323,18 @@ exports[` when ChevronRight.Fill Icon rendered match snapshot 1`] = `
`;
-exports[` when ChevronRight.Regular Icon rendered match snapshot 1`] = `
+exports[` when ChevronUp.Regular Icon rendered match snapshot 1`] = `
.emotion-0 {
display: -webkit-box;
display: -webkit-flex;
@@ -7687,18 +8377,18 @@ exports[` when ChevronRight.Regular Icon rendered match snapshot 1`] = `
`;
-exports[` when ChevronRight.Thin Icon rendered match snapshot 1`] = `
+exports[` when ChevronUp.Thin Icon rendered match snapshot 1`] = `
.emotion-0 {
display: -webkit-box;
display: -webkit-flex;
@@ -7741,18 +8431,18 @@ exports[` when ChevronRight.Thin Icon rendered match snapshot 1`] = `
`;
-exports[` when ChevronUp.Fill Icon rendered match snapshot 1`] = `
+exports[` when ChevronUpCircle.Fill Icon rendered match snapshot 1`] = `
.emotion-0 {
display: -webkit-box;
display: -webkit-flex;
@@ -7795,18 +8485,20 @@ exports[` when ChevronUp.Fill Icon rendered match snapshot 1`] = `
`;
-exports[` when ChevronUp.Regular Icon rendered match snapshot 1`] = `
+exports[` when ChevronUpCircle.Regular Icon rendered match snapshot 1`] = `
.emotion-0 {
display: -webkit-box;
display: -webkit-flex;
@@ -7849,18 +8541,24 @@ exports[` when ChevronUp.Regular Icon rendered match snapshot 1`] = `
`;
-exports[` when ChevronUp.Thin Icon rendered match snapshot 1`] = `
+exports[` when ChevronUpCircle.Thin Icon rendered match snapshot 1`] = `
.emotion-0 {
display: -webkit-box;
display: -webkit-flex;
@@ -7903,12 +8601,18 @@ exports[` when ChevronUp.Thin Icon rendered match snapshot 1`] = `
@@ -28748,6 +29452,196 @@ exports[` when Sorting.Thin Icon rendered match snapshot 1`] = `
`;
+exports[` when Sparkle.Fill Icon rendered match snapshot 1`] = `
+.emotion-0 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-content: stretch;
+ -ms-flex-line-pack: stretch;
+ align-content: stretch;
+ -webkit-flex-shrink: 1;
+ -ms-flex-negative: 1;
+ flex-shrink: 1;
+ -webkit-flex-direction: column;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ box-sizing: border-box;
+ position: relative;
+ width: 24px;
+ height: 24px;
+ fill: #0c0c0c;
+}
+
+.emotion-1 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-content: stretch;
+ -ms-flex-line-pack: stretch;
+ align-content: stretch;
+ -webkit-flex-shrink: 1;
+ -ms-flex-negative: 1;
+ flex-shrink: 1;
+ -webkit-flex-direction: column;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ box-sizing: border-box;
+ position: relative;
+}
+
+
+`;
+
+exports[` when Sparkle.Regular Icon rendered match snapshot 1`] = `
+.emotion-0 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-content: stretch;
+ -ms-flex-line-pack: stretch;
+ align-content: stretch;
+ -webkit-flex-shrink: 1;
+ -ms-flex-negative: 1;
+ flex-shrink: 1;
+ -webkit-flex-direction: column;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ box-sizing: border-box;
+ position: relative;
+ width: 24px;
+ height: 24px;
+ fill: #0c0c0c;
+}
+
+.emotion-1 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-content: stretch;
+ -ms-flex-line-pack: stretch;
+ align-content: stretch;
+ -webkit-flex-shrink: 1;
+ -ms-flex-negative: 1;
+ flex-shrink: 1;
+ -webkit-flex-direction: column;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ box-sizing: border-box;
+ position: relative;
+}
+
+
+`;
+
+exports[` when Sparkle.Thin Icon rendered match snapshot 1`] = `
+.emotion-0 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-content: stretch;
+ -ms-flex-line-pack: stretch;
+ align-content: stretch;
+ -webkit-flex-shrink: 1;
+ -ms-flex-negative: 1;
+ flex-shrink: 1;
+ -webkit-flex-direction: column;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ box-sizing: border-box;
+ position: relative;
+ width: 24px;
+ height: 24px;
+ fill: #0c0c0c;
+}
+
+.emotion-1 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-content: stretch;
+ -ms-flex-line-pack: stretch;
+ align-content: stretch;
+ -webkit-flex-shrink: 1;
+ -ms-flex-negative: 1;
+ flex-shrink: 1;
+ -webkit-flex-direction: column;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ box-sizing: border-box;
+ position: relative;
+}
+
+
+`;
+
exports[` when Star.Fill Icon rendered match snapshot 1`] = `
.emotion-0 {
display: -webkit-box;
diff --git a/packages/vibrant-icons/src/lib/Icon/generated/ChevronDownCircle/Fill.tsx b/packages/vibrant-icons/src/lib/Icon/generated/ChevronDownCircle/Fill.tsx
new file mode 100644
index 000000000..7df24eb40
--- /dev/null
+++ b/packages/vibrant-icons/src/lib/Icon/generated/ChevronDownCircle/Fill.tsx
@@ -0,0 +1,19 @@
+import { Svg } from '@vibrant-ui/core';
+import type { IconComponent, IconProps } from '../../IconProp';
+
+export const Fill: IconComponent = ({
+ size = 24,
+ fill = 'onColor',
+ testId = 'chevrondowncircle-fill',
+ ...props
+}) => (
+
+);
+
+Fill.iconType = 'Fill';
diff --git a/packages/vibrant-icons/src/lib/Icon/generated/ChevronDownCircle/Regular.tsx b/packages/vibrant-icons/src/lib/Icon/generated/ChevronDownCircle/Regular.tsx
new file mode 100644
index 000000000..ad8fc9252
--- /dev/null
+++ b/packages/vibrant-icons/src/lib/Icon/generated/ChevronDownCircle/Regular.tsx
@@ -0,0 +1,20 @@
+import { Svg } from '@vibrant-ui/core';
+import type { IconComponent, IconProps } from '../../IconProp';
+
+export const Regular: IconComponent = ({
+ size = 24,
+ fill = 'onColor',
+ testId = 'chevrondowncircle-regular',
+ ...props
+}) => (
+
+);
+
+Regular.iconType = 'Regular';
diff --git a/packages/vibrant-icons/src/lib/Icon/generated/ChevronDownCircle/Thin.tsx b/packages/vibrant-icons/src/lib/Icon/generated/ChevronDownCircle/Thin.tsx
new file mode 100644
index 000000000..f2ac10cbe
--- /dev/null
+++ b/packages/vibrant-icons/src/lib/Icon/generated/ChevronDownCircle/Thin.tsx
@@ -0,0 +1,20 @@
+import { Svg } from '@vibrant-ui/core';
+import type { IconComponent, IconProps } from '../../IconProp';
+
+export const Thin: IconComponent = ({
+ size = 24,
+ fill = 'onColor',
+ testId = 'chevrondowncircle-thin',
+ ...props
+}) => (
+
+);
+
+Thin.iconType = 'Thin';
diff --git a/packages/vibrant-icons/src/lib/Icon/generated/ChevronDownCircle/index.ts b/packages/vibrant-icons/src/lib/Icon/generated/ChevronDownCircle/index.ts
new file mode 100644
index 000000000..13cf66c04
--- /dev/null
+++ b/packages/vibrant-icons/src/lib/Icon/generated/ChevronDownCircle/index.ts
@@ -0,0 +1,3 @@
+export { Fill } from './Fill';
+export { Regular } from './Regular';
+export { Thin } from './Thin';
diff --git a/packages/vibrant-icons/src/lib/Icon/generated/ChevronLeftCircle/Fill.tsx b/packages/vibrant-icons/src/lib/Icon/generated/ChevronLeftCircle/Fill.tsx
new file mode 100644
index 000000000..b4de8af88
--- /dev/null
+++ b/packages/vibrant-icons/src/lib/Icon/generated/ChevronLeftCircle/Fill.tsx
@@ -0,0 +1,19 @@
+import { Svg } from '@vibrant-ui/core';
+import type { IconComponent, IconProps } from '../../IconProp';
+
+export const Fill: IconComponent = ({
+ size = 24,
+ fill = 'onColor',
+ testId = 'chevronleftcircle-fill',
+ ...props
+}) => (
+
+);
+
+Fill.iconType = 'Fill';
diff --git a/packages/vibrant-icons/src/lib/Icon/generated/ChevronLeftCircle/Regular.tsx b/packages/vibrant-icons/src/lib/Icon/generated/ChevronLeftCircle/Regular.tsx
new file mode 100644
index 000000000..a5e7174d0
--- /dev/null
+++ b/packages/vibrant-icons/src/lib/Icon/generated/ChevronLeftCircle/Regular.tsx
@@ -0,0 +1,20 @@
+import { Svg } from '@vibrant-ui/core';
+import type { IconComponent, IconProps } from '../../IconProp';
+
+export const Regular: IconComponent = ({
+ size = 24,
+ fill = 'onColor',
+ testId = 'chevronleftcircle-regular',
+ ...props
+}) => (
+
+);
+
+Regular.iconType = 'Regular';
diff --git a/packages/vibrant-icons/src/lib/Icon/generated/ChevronLeftCircle/Thin.tsx b/packages/vibrant-icons/src/lib/Icon/generated/ChevronLeftCircle/Thin.tsx
new file mode 100644
index 000000000..c17f4b02a
--- /dev/null
+++ b/packages/vibrant-icons/src/lib/Icon/generated/ChevronLeftCircle/Thin.tsx
@@ -0,0 +1,20 @@
+import { Svg } from '@vibrant-ui/core';
+import type { IconComponent, IconProps } from '../../IconProp';
+
+export const Thin: IconComponent = ({
+ size = 24,
+ fill = 'onColor',
+ testId = 'chevronleftcircle-thin',
+ ...props
+}) => (
+
+);
+
+Thin.iconType = 'Thin';
diff --git a/packages/vibrant-icons/src/lib/Icon/generated/ChevronLeftCircle/index.ts b/packages/vibrant-icons/src/lib/Icon/generated/ChevronLeftCircle/index.ts
new file mode 100644
index 000000000..13cf66c04
--- /dev/null
+++ b/packages/vibrant-icons/src/lib/Icon/generated/ChevronLeftCircle/index.ts
@@ -0,0 +1,3 @@
+export { Fill } from './Fill';
+export { Regular } from './Regular';
+export { Thin } from './Thin';
diff --git a/packages/vibrant-icons/src/lib/Icon/generated/ChevronRightCircle/Fill.tsx b/packages/vibrant-icons/src/lib/Icon/generated/ChevronRightCircle/Fill.tsx
new file mode 100644
index 000000000..7f9feed25
--- /dev/null
+++ b/packages/vibrant-icons/src/lib/Icon/generated/ChevronRightCircle/Fill.tsx
@@ -0,0 +1,19 @@
+import { Svg } from '@vibrant-ui/core';
+import type { IconComponent, IconProps } from '../../IconProp';
+
+export const Fill: IconComponent = ({
+ size = 24,
+ fill = 'onColor',
+ testId = 'chevronrightcircle-fill',
+ ...props
+}) => (
+
+);
+
+Fill.iconType = 'Fill';
diff --git a/packages/vibrant-icons/src/lib/Icon/generated/ChevronRightCircle/Regular.tsx b/packages/vibrant-icons/src/lib/Icon/generated/ChevronRightCircle/Regular.tsx
new file mode 100644
index 000000000..87dbfdd93
--- /dev/null
+++ b/packages/vibrant-icons/src/lib/Icon/generated/ChevronRightCircle/Regular.tsx
@@ -0,0 +1,20 @@
+import { Svg } from '@vibrant-ui/core';
+import type { IconComponent, IconProps } from '../../IconProp';
+
+export const Regular: IconComponent = ({
+ size = 24,
+ fill = 'onColor',
+ testId = 'chevronrightcircle-regular',
+ ...props
+}) => (
+
+);
+
+Regular.iconType = 'Regular';
diff --git a/packages/vibrant-icons/src/lib/Icon/generated/ChevronRightCircle/Thin.tsx b/packages/vibrant-icons/src/lib/Icon/generated/ChevronRightCircle/Thin.tsx
new file mode 100644
index 000000000..5ac9dd04e
--- /dev/null
+++ b/packages/vibrant-icons/src/lib/Icon/generated/ChevronRightCircle/Thin.tsx
@@ -0,0 +1,20 @@
+import { Svg } from '@vibrant-ui/core';
+import type { IconComponent, IconProps } from '../../IconProp';
+
+export const Thin: IconComponent = ({
+ size = 24,
+ fill = 'onColor',
+ testId = 'chevronrightcircle-thin',
+ ...props
+}) => (
+
+);
+
+Thin.iconType = 'Thin';
diff --git a/packages/vibrant-icons/src/lib/Icon/generated/ChevronRightCircle/index.ts b/packages/vibrant-icons/src/lib/Icon/generated/ChevronRightCircle/index.ts
new file mode 100644
index 000000000..13cf66c04
--- /dev/null
+++ b/packages/vibrant-icons/src/lib/Icon/generated/ChevronRightCircle/index.ts
@@ -0,0 +1,3 @@
+export { Fill } from './Fill';
+export { Regular } from './Regular';
+export { Thin } from './Thin';
diff --git a/packages/vibrant-icons/src/lib/Icon/generated/ChevronUpCircle/Fill.tsx b/packages/vibrant-icons/src/lib/Icon/generated/ChevronUpCircle/Fill.tsx
new file mode 100644
index 000000000..000e14ad3
--- /dev/null
+++ b/packages/vibrant-icons/src/lib/Icon/generated/ChevronUpCircle/Fill.tsx
@@ -0,0 +1,19 @@
+import { Svg } from '@vibrant-ui/core';
+import type { IconComponent, IconProps } from '../../IconProp';
+
+export const Fill: IconComponent = ({
+ size = 24,
+ fill = 'onColor',
+ testId = 'chevronupcircle-fill',
+ ...props
+}) => (
+
+);
+
+Fill.iconType = 'Fill';
diff --git a/packages/vibrant-icons/src/lib/Icon/generated/ChevronUpCircle/Regular.tsx b/packages/vibrant-icons/src/lib/Icon/generated/ChevronUpCircle/Regular.tsx
new file mode 100644
index 000000000..9417294d8
--- /dev/null
+++ b/packages/vibrant-icons/src/lib/Icon/generated/ChevronUpCircle/Regular.tsx
@@ -0,0 +1,20 @@
+import { Svg } from '@vibrant-ui/core';
+import type { IconComponent, IconProps } from '../../IconProp';
+
+export const Regular: IconComponent = ({
+ size = 24,
+ fill = 'onColor',
+ testId = 'chevronupcircle-regular',
+ ...props
+}) => (
+
+);
+
+Regular.iconType = 'Regular';
diff --git a/packages/vibrant-icons/src/lib/Icon/generated/ChevronUpCircle/Thin.tsx b/packages/vibrant-icons/src/lib/Icon/generated/ChevronUpCircle/Thin.tsx
new file mode 100644
index 000000000..6a05d5bee
--- /dev/null
+++ b/packages/vibrant-icons/src/lib/Icon/generated/ChevronUpCircle/Thin.tsx
@@ -0,0 +1,20 @@
+import { Svg } from '@vibrant-ui/core';
+import type { IconComponent, IconProps } from '../../IconProp';
+
+export const Thin: IconComponent = ({
+ size = 24,
+ fill = 'onColor',
+ testId = 'chevronupcircle-thin',
+ ...props
+}) => (
+
+);
+
+Thin.iconType = 'Thin';
diff --git a/packages/vibrant-icons/src/lib/Icon/generated/ChevronUpCircle/index.ts b/packages/vibrant-icons/src/lib/Icon/generated/ChevronUpCircle/index.ts
new file mode 100644
index 000000000..13cf66c04
--- /dev/null
+++ b/packages/vibrant-icons/src/lib/Icon/generated/ChevronUpCircle/index.ts
@@ -0,0 +1,3 @@
+export { Fill } from './Fill';
+export { Regular } from './Regular';
+export { Thin } from './Thin';
diff --git a/packages/vibrant-icons/src/lib/Icon/generated/Sparkle/Fill.tsx b/packages/vibrant-icons/src/lib/Icon/generated/Sparkle/Fill.tsx
new file mode 100644
index 000000000..43d340eb7
--- /dev/null
+++ b/packages/vibrant-icons/src/lib/Icon/generated/Sparkle/Fill.tsx
@@ -0,0 +1,17 @@
+import { Svg } from '@vibrant-ui/core';
+import type { IconComponent, IconProps } from '../../IconProp';
+
+export const Fill: IconComponent = ({
+ size = 24,
+ fill = 'onColor',
+ testId = 'sparkle-fill',
+ ...props
+}) => (
+
+);
+
+Fill.iconType = 'Fill';
diff --git a/packages/vibrant-icons/src/lib/Icon/generated/Sparkle/Regular.tsx b/packages/vibrant-icons/src/lib/Icon/generated/Sparkle/Regular.tsx
new file mode 100644
index 000000000..7b35d2a39
--- /dev/null
+++ b/packages/vibrant-icons/src/lib/Icon/generated/Sparkle/Regular.tsx
@@ -0,0 +1,21 @@
+import { Svg } from '@vibrant-ui/core';
+import type { IconComponent, IconProps } from '../../IconProp';
+
+export const Regular: IconComponent = ({
+ size = 24,
+ fill = 'onColor',
+ testId = 'sparkle-regular',
+ ...props
+}) => (
+
+);
+
+Regular.iconType = 'Regular';
diff --git a/packages/vibrant-icons/src/lib/Icon/generated/Sparkle/Thin.tsx b/packages/vibrant-icons/src/lib/Icon/generated/Sparkle/Thin.tsx
new file mode 100644
index 000000000..5638d490c
--- /dev/null
+++ b/packages/vibrant-icons/src/lib/Icon/generated/Sparkle/Thin.tsx
@@ -0,0 +1,21 @@
+import { Svg } from '@vibrant-ui/core';
+import type { IconComponent, IconProps } from '../../IconProp';
+
+export const Thin: IconComponent = ({
+ size = 24,
+ fill = 'onColor',
+ testId = 'sparkle-thin',
+ ...props
+}) => (
+
+);
+
+Thin.iconType = 'Thin';
diff --git a/packages/vibrant-icons/src/lib/Icon/generated/Sparkle/index.ts b/packages/vibrant-icons/src/lib/Icon/generated/Sparkle/index.ts
new file mode 100644
index 000000000..13cf66c04
--- /dev/null
+++ b/packages/vibrant-icons/src/lib/Icon/generated/Sparkle/index.ts
@@ -0,0 +1,3 @@
+export { Fill } from './Fill';
+export { Regular } from './Regular';
+export { Thin } from './Thin';
diff --git a/packages/vibrant-icons/src/lib/Icon/generated/index.ts b/packages/vibrant-icons/src/lib/Icon/generated/index.ts
index 639fcb323..7d2daf109 100644
--- a/packages/vibrant-icons/src/lib/Icon/generated/index.ts
+++ b/packages/vibrant-icons/src/lib/Icon/generated/index.ts
@@ -43,9 +43,13 @@ export * as CheckboxOff from './CheckboxOff';
export * as CheckboxOn from './CheckboxOn';
export * as CheckerBoardShield from './CheckerBoardShield';
export * as ChevronDown from './ChevronDown';
+export * as ChevronDownCircle from './ChevronDownCircle';
export * as ChevronLeft from './ChevronLeft';
+export * as ChevronLeftCircle from './ChevronLeftCircle';
export * as ChevronRight from './ChevronRight';
+export * as ChevronRightCircle from './ChevronRightCircle';
export * as ChevronUp from './ChevronUp';
+export * as ChevronUpCircle from './ChevronUpCircle';
export * as Clap from './Clap';
export * as ClearStyle from './ClearStyle';
export * as Clip from './Clip';
@@ -171,6 +175,7 @@ export * as ShippingTruck from './ShippingTruck';
export * as SlowMotion from './SlowMotion';
export * as Smile from './Smile';
export * as Sorting from './Sorting';
+export * as Sparkle from './Sparkle';
export * as Star from './Star';
export * as StarFull from './StarFull';
export * as StarHalf from './StarHalf';