diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0cdc425..217df04 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,14 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.33.5](https://github.com/Fantom-foundation/Fantom-Vue3-Components/compare/v0.33.4...v0.33.5) (2023-08-11)
+
+
+### Features
+
+* **Formatters:** add support for formatting to parts ([0b44749](https://github.com/Fantom-foundation/Fantom-Vue3-Components/commit/0b4474938e8561468c8528bb910e214199e3835a))
+* **FSvgIcon:** add `applyColor` option ([20c66ce](https://github.com/Fantom-foundation/Fantom-Vue3-Components/commit/20c66ce3e0b4078f425d0df07ccfc6a03baaeee3))
+
 ### [0.33.4](https://github.com/Fantom-foundation/Fantom-Vue3-Components/compare/v0.33.3...v0.33.4) (2023-08-04)
 
 
diff --git a/package-lock.json b/package-lock.json
index 3997b53..d17688e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
     "name": "fantom-vue3-components",
-    "version": "0.33.4",
+    "version": "0.33.5",
     "lockfileVersion": 2,
     "requires": true,
     "packages": {
         "": {
             "name": "fantom-vue3-components",
-            "version": "0.33.4",
+            "version": "0.33.5",
             "license": "MIT",
             "dependencies": {
                 "@vueuse/core": "^8.5.0",
diff --git a/package.json b/package.json
index 7d62d60..bb026c4 100755
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "fantom-vue3-components",
-    "version": "0.33.4",
+    "version": "0.33.5",
     "description": "Library of various Vue 3 components with focus on accessibility",
     "author": "Fantom Foundation",
     "license": "MIT",
diff --git a/src/components/FCopyButton/__snapshots__/FCopyButton.spec.js.snap b/src/components/FCopyButton/__snapshots__/FCopyButton.spec.js.snap
index 772548e..63c004d 100755
--- a/src/components/FCopyButton/__snapshots__/FCopyButton.spec.js.snap
+++ b/src/components/FCopyButton/__snapshots__/FCopyButton.spec.js.snap
@@ -21,7 +21,7 @@ exports[`FCopyButton > should render correctly 1`] = `
       
       <span
         aria-hidden="true"
-        class="fsvgicon"
+        class="fsvgicon fsvgicon-fill"
         style="width: 16px; height: 16px;"
       >
         <span
diff --git a/src/components/FIconset/__snapshots__/FIconset.spec.js.snap b/src/components/FIconset/__snapshots__/FIconset.spec.js.snap
index 4375ac4..6d10cf0 100755
--- a/src/components/FIconset/__snapshots__/FIconset.spec.js.snap
+++ b/src/components/FIconset/__snapshots__/FIconset.spec.js.snap
@@ -3,7 +3,7 @@
 exports[`FIconset > should render correctly 1`] = `
 <span
   aria-hidden="true"
-  class="fsvgicon"
+  class="fsvgicon fsvgicon-fill"
 >
   <span
     class="fsvgicon-icon"
diff --git a/src/components/FInfo/__snapshots__/FInfo.spec.js.snap b/src/components/FInfo/__snapshots__/FInfo.spec.js.snap
index 27b155c..2d0cdae 100755
--- a/src/components/FInfo/__snapshots__/FInfo.spec.js.snap
+++ b/src/components/FInfo/__snapshots__/FInfo.spec.js.snap
@@ -20,7 +20,7 @@ exports[`FInfo > should render correctly 1`] = `
       
       <span
         aria-hidden="true"
-        class="fsvgicon"
+        class="fsvgicon fsvgicon-fill"
         style="width: 16px; height: 16px;"
       >
         <span
diff --git a/src/components/FSvgIcon/FSvgIcon.stories.js b/src/components/FSvgIcon/FSvgIcon.stories.js
index 4ca9550..c0f3281 100755
--- a/src/components/FSvgIcon/FSvgIcon.stories.js
+++ b/src/components/FSvgIcon/FSvgIcon.stories.js
@@ -53,6 +53,40 @@ export const Original = () => ({
     `,
 });
 
+export const ApplyColor = () => ({
+    components: { FSvgIcon, IconTimes, IconPresent, IconFantom },
+    template: `
+        <div>
+          <h3><code>fill</code></h3>
+          <FSvgIcon color="#00c"><IconFantom /></FSvgIcon>
+          <FSvgIcon color="#00c" size="32px">
+              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M10 9L14 13L10 17" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+              </svg>
+          </FSvgIcon>
+          <FSvgIcon style="--fsvgicon-color: #00c"><IconPresent /></FSvgIcon>
+
+          <h3><code>stroke</code></h3>
+          <FSvgIcon apply-color="stroke" color="#00c"><IconFantom /></FSvgIcon>
+          <FSvgIcon apply-color="stroke" color="#00c" size="32px">
+              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M10 9L14 13L10 17" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+              </svg>
+          </FSvgIcon>
+          <FSvgIcon apply-color="stroke" style="--fsvgicon-color: #00c"><IconPresent /></FSvgIcon>
+
+          <h3><code>fill,stroke</code></h3>
+          <FSvgIcon apply-color="fill,stroke" color="#00c"><IconFantom /></FSvgIcon>
+          <FSvgIcon apply-color="fill,stroke" color="#00c" size="32px">
+              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M10 9L14 13L10 17" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+              </svg>
+          </FSvgIcon>
+          <FSvgIcon apply-color="fill,stroke" style="--fsvgicon-color: #00c"><IconPresent /></FSvgIcon>
+        </div>
+    `,
+});
+
 export const Rotate = () => ({
     components: { FSvgIcon, IconTimes, IconPresent, IconFantom },
     template: `
diff --git a/src/components/FSvgIcon/FSvgIcon.vue b/src/components/FSvgIcon/FSvgIcon.vue
index da67558..c6b0e20 100755
--- a/src/components/FSvgIcon/FSvgIcon.vue
+++ b/src/components/FSvgIcon/FSvgIcon.vue
@@ -22,6 +22,11 @@ export default {
             type: Boolean,
             default: false,
         },
+        /** Apply color to 'fill' and/or 'stroke' */
+        applyColor: {
+            type: String,
+            default: 'fill',
+        },
         /** Size of icon. Sets width and height by the same value */
         size: {
             type: [String, Number],
@@ -56,6 +61,8 @@ export default {
         classes() {
             return {
                 'fsvgicon-original': this.original,
+                'fsvgicon-fill': this.applyColor.indexOf('fill') > -1,
+                'fsvgicon-stroke': this.applyColor.indexOf('stroke') > -1,
             };
         },
 
diff --git a/src/components/FSvgIcon/_style.scss b/src/components/FSvgIcon/_style.scss
index 9f491a1..6d75c83 100755
--- a/src/components/FSvgIcon/_style.scss
+++ b/src/components/FSvgIcon/_style.scss
@@ -19,8 +19,19 @@
     }
 
     &:not(&-original) {
-        svg, svg g, svg path {
-            fill: currentColor;
+        //svg, svg g, svg path {
+        //    fill: currentColor;
+        //}
+        &.fsvgicon-fill {
+            svg, svg g, svg path {
+                fill: currentColor;
+            }
+        }
+
+        &.fsvgicon-stroke {
+            svg, svg g, svg path {
+                stroke: currentColor;
+            }
         }
     }
 }
diff --git a/src/plugins/Formatters/Formatters.js b/src/plugins/Formatters/Formatters.js
index 9b84bdb..3dd2623 100644
--- a/src/plugins/Formatters/Formatters.js
+++ b/src/plugins/Formatters/Formatters.js
@@ -135,13 +135,37 @@ export class Formatters {
 
     /**
      * @param {number} value
-     * @param {number} [maximumFractionDigits]
+     * @param {number, Object} [maximumFractionDigitsOrOptions]
      * @param {string} [numberFormatKey] Key from #formats.number object
      * @param {string} [unit]
      * @return {string}
      */
-    number(value, maximumFractionDigits = 20, numberFormatKey = 'default', unit = '') {
-        return this.#getNumberFomatter(numberFormatKey, maximumFractionDigits, unit).format(value);
+    number(value, maximumFractionDigitsOrOptions = 20, numberFormatKey = 'default', unit = '') {
+        if (maximumFractionDigitsOrOptions && typeof maximumFractionDigitsOrOptions === 'object') {
+            if (!('numberFormatKey' in maximumFractionDigitsOrOptions)) {
+                maximumFractionDigitsOrOptions.numberFormatKey = numberFormatKey;
+            }
+
+            if (!('maximumFractionDigits' in maximumFractionDigitsOrOptions)) {
+                maximumFractionDigitsOrOptions.maximumFractionDigits = 20;
+            }
+
+            if (unit && !('unit' in maximumFractionDigitsOrOptions)) {
+                maximumFractionDigitsOrOptions.unit = unit;
+            }
+
+            const formatter = this.#getNumberFomatter(maximumFractionDigitsOrOptions);
+
+            return maximumFractionDigitsOrOptions.formatToParts
+                ? formatter.formatToParts(value)
+                : formatter.format(value);
+        }
+
+        return this.#getNumberFomatter({
+            numberFormatKey,
+            maximumFractionDigits: maximumFractionDigitsOrOptions,
+            unit,
+        }).format(value);
     }
 
     /**
@@ -193,25 +217,28 @@ export class Formatters {
     }
 
     /**
-     * @param {string} numberFormatKey Key from #formats.number object
-     * @param {number} [maximumFractionDigits]
-     * @param {string} [unit]
+     * @param {Object} options
      * @return {Intl.NumberFormat}
      */
-    #getNumberFomatter(numberFormatKey = '', maximumFractionDigits = 20, unit = '') {
-        const numberFormat = this.#formats?.number[numberFormatKey];
+    #getNumberFomatter(options) {
+        const numberFormat = this.#formats?.number[options.numberFormatKey];
         const format = {
-            maximumFractionDigits,
             ...numberFormat,
+            ...options,
         };
 
-        if (unit) {
+        if (options.unit) {
             format.style = 'unit';
-            format.unit = unit;
+        } else {
+            delete format.unit;
+        }
+
+        if (format.maximumFractionDigits === null && 'maximumFractionDigits' in numberFormat) {
+            format.maximumFractionDigits = numberFormat.maximumFractionDigits;
         }
 
         if (!numberFormat) {
-            throw new Error(`Can't find number format '${numberFormatKey}'`);
+            throw new Error(`Can't find number format '${options.numberFormatKey}'`);
         }
 
         if (!('minimumFractionDigits' in format)) {
@@ -221,7 +248,7 @@ export class Formatters {
         return this.#getCachedFormatter({
             localeTag: this.#localeTag,
             format,
-            formatKey: numberFormatKey,
+            formatKey: options.numberFormatKey,
             type: 'number',
         });
     }
diff --git a/src/plugins/Formatters/Formatters.spec.js b/src/plugins/Formatters/Formatters.spec.js
index 6f00328..0584066 100644
--- a/src/plugins/Formatters/Formatters.spec.js
+++ b/src/plugins/Formatters/Formatters.spec.js
@@ -161,6 +161,29 @@ describe('Formatters', () => {
             expect(formatters.number(123456.789, null, 'myNumber')).toBe('+123,456.79');
         });
 
+        it('should use second argument as options for formatter', () => {
+            expect(formatters.number(123456.789, { maximumFractionDigits: 1, numberFormatKey: 'myNumber' })).toBe(
+                '+123,456.8'
+            );
+        });
+
+        it('should format to parts', () => {
+            expect(
+                formatters.number(123456.789, {
+                    formatToParts: true,
+                    maximumFractionDigits: 1,
+                    numberFormatKey: 'myNumber',
+                })
+            ).toEqual([
+                { type: 'plusSign', value: '+' },
+                { type: 'integer', value: '123' },
+                { type: 'group', value: ',' },
+                { type: 'integer', value: '456' },
+                { type: 'decimal', value: '.' },
+                { type: 'fraction', value: '8' },
+            ]);
+        });
+
         it('should format number with unit', () => {
             expect(formatters.number(123456.789, null, 'myNumberWithUnit', 'byte')).toBe('123KB');
         });