diff --git a/src/components/desktop/ColorSelect.vue b/src/components/desktop/ColorSelect.vue
index 69f81a1e..ea9b78e2 100644
--- a/src/components/desktop/ColorSelect.vue
+++ b/src/components/desktop/ColorSelect.vue
@@ -40,6 +40,7 @@
 
 <script>
 import { arrayContainsFieldvalue } from '@/lib/common.js';
+import { getColorsInRows } from '@/lib/color.js';
 import { scrollToSelectedItem } from '@/lib/ui.desktop.js';
 
 import {
@@ -71,20 +72,7 @@ export default {
     },
     computed: {
         allColorRows() {
-            const ret = [];
-            let rowCount = -1;
-
-            for (let i = 0; i < this.allColorInfos.length; i++) {
-                if (i % this.itemPerRow === 0) {
-                    ret[++rowCount] = [];
-                }
-
-                ret[rowCount].push({
-                    color: this.allColorInfos[i]
-                });
-            }
-
-            return ret;
+            return getColorsInRows(this.allColorInfos, this.itemPerRow);
         },
         color: {
             get: function () {
diff --git a/src/components/desktop/IconSelect.vue b/src/components/desktop/IconSelect.vue
index 34dff259..725ef3ca 100644
--- a/src/components/desktop/IconSelect.vue
+++ b/src/components/desktop/IconSelect.vue
@@ -38,6 +38,7 @@
 
 <script>
 import { arrayContainsFieldvalue } from '@/lib/common.js';
+import { getIconsInRows } from '@/lib/icon.js';
 import { scrollToSelectedItem } from '@/lib/ui.desktop.js';
 
 import {
@@ -69,30 +70,7 @@ export default {
     },
     computed: {
         allIconRows() {
-            const ret = [];
-            let rowCount = 0;
-
-            for (let iconInfoId in this.allIconInfos) {
-                if (!Object.prototype.hasOwnProperty.call(this.allIconInfos, iconInfoId)) {
-                    continue;
-                }
-
-                const iconInfo = this.allIconInfos[iconInfoId];
-
-                if (!ret[rowCount]) {
-                    ret[rowCount] = [];
-                } else if (ret[rowCount] && ret[rowCount].length >= this.itemPerRow) {
-                    rowCount++;
-                    ret[rowCount] = [];
-                }
-
-                ret[rowCount].push({
-                    id: iconInfoId,
-                    icon: iconInfo.icon
-                });
-            }
-
-            return ret;
+            return getIconsInRows(this.allIconInfos, this.itemPerRow);
         },
         icon: {
             get: function () {
diff --git a/src/components/mobile/ColorSelectionSheet.vue b/src/components/mobile/ColorSelectionSheet.vue
index 5389a885..044e8265 100644
--- a/src/components/mobile/ColorSelectionSheet.vue
+++ b/src/components/mobile/ColorSelectionSheet.vue
@@ -30,6 +30,7 @@
 
 <script>
 import { arrayContainsFieldvalue } from '@/lib/common.js';
+import { getColorsInRows } from '@/lib/color.js';
 import { scrollToSelectedItem } from '@/lib/ui.mobile.js';
 
 export default {
@@ -53,20 +54,7 @@ export default {
     },
     computed: {
         allColorRows() {
-            const ret = [];
-            let rowCount = -1;
-
-            for (let i = 0; i < this.allColorInfos.length; i++) {
-                if (i % this.itemPerRow === 0) {
-                    ret[++rowCount] = [];
-                }
-
-                ret[rowCount].push({
-                    color: this.allColorInfos[i]
-                });
-            }
-
-            return ret;
+            return getColorsInRows(this.allColorInfos, this.itemPerRow);
         }
     },
     methods: {
diff --git a/src/components/mobile/IconSelectionSheet.vue b/src/components/mobile/IconSelectionSheet.vue
index 300492d9..b539ebfb 100644
--- a/src/components/mobile/IconSelectionSheet.vue
+++ b/src/components/mobile/IconSelectionSheet.vue
@@ -30,6 +30,7 @@
 
 <script>
 import { arrayContainsFieldvalue } from '@/lib/common.js';
+import { getIconsInRows } from '@/lib/icon.js';
 import { scrollToSelectedItem } from '@/lib/ui.mobile.js';
 
 export default {
@@ -54,30 +55,7 @@ export default {
     },
     computed: {
         allIconRows() {
-            const ret = [];
-            let rowCount = 0;
-
-            for (let iconInfoId in this.allIconInfos) {
-                if (!Object.prototype.hasOwnProperty.call(this.allIconInfos, iconInfoId)) {
-                    continue;
-                }
-
-                const iconInfo = this.allIconInfos[iconInfoId];
-
-                if (!ret[rowCount]) {
-                    ret[rowCount] = [];
-                } else if (ret[rowCount] && ret[rowCount].length >= this.itemPerRow) {
-                    rowCount++;
-                    ret[rowCount] = [];
-                }
-
-                ret[rowCount].push({
-                    id: iconInfoId,
-                    icon: iconInfo.icon
-                });
-            }
-
-            return ret;
+            return getIconsInRows(this.allIconInfos, this.itemPerRow);
         },
         heightClass() {
             if (this.allIconRows.length > 10) {
diff --git a/src/lib/color.js b/src/lib/color.js
new file mode 100644
index 00000000..616ce55b
--- /dev/null
+++ b/src/lib/color.js
@@ -0,0 +1,16 @@
+export function getColorsInRows(allColorInfos, itemPerRow) {
+    const ret = [];
+    let rowCount = -1;
+
+    for (let i = 0; i < allColorInfos.length; i++) {
+        if (i % itemPerRow === 0) {
+            ret[++rowCount] = [];
+        }
+
+        ret[rowCount].push({
+            color: allColorInfos[i]
+        });
+    }
+
+    return ret;
+}
diff --git a/src/lib/icon.js b/src/lib/icon.js
new file mode 100644
index 00000000..ec47f7c2
--- /dev/null
+++ b/src/lib/icon.js
@@ -0,0 +1,26 @@
+export function getIconsInRows(allIconInfos, itemPerRow) {
+    const ret = [];
+    let rowCount = 0;
+
+    for (let iconInfoId in allIconInfos) {
+        if (!Object.prototype.hasOwnProperty.call(allIconInfos, iconInfoId)) {
+            continue;
+        }
+
+        const iconInfo = allIconInfos[iconInfoId];
+
+        if (!ret[rowCount]) {
+            ret[rowCount] = [];
+        } else if (ret[rowCount] && ret[rowCount].length >= itemPerRow) {
+            rowCount++;
+            ret[rowCount] = [];
+        }
+
+        ret[rowCount].push({
+            id: iconInfoId,
+            icon: iconInfo.icon
+        });
+    }
+
+    return ret;
+}