Update: Changed icon pack to Boxicons

src/components/ui/Category.tsx

@@ -1,6 +1,6 @@
 import styled, { css } from "styled-components";
 import { Children } from "../../types/Preact";
-import { Plus } from "@styled-icons/feather";
+import { Plus } from "@styled-icons/boxicons-regular";
 
 const CategoryBase = styled.div<Pick<Props, 'variant'>>`
     font-size: 12px;

src/components/ui/Checkbox.tsx

@@ -1,4 +1,4 @@
-import { Check } from "@styled-icons/feather";
+import { Check } from "@styled-icons/boxicons-regular";
 import { Children } from "../../types/Preact";
 import styled, { css } from "styled-components";
 
@@ -59,7 +59,6 @@ const Checkmark = styled.div<{ checked: boolean }>`
 
     svg {
         color: var(--secondary-background);
-        stroke-width: 2;
     }
 
     ${(props) =>

src/components/ui/ColourSwatches.tsx

@@ -1,7 +1,6 @@
 import { useRef } from "preact/hooks";
-import { Check } from "@styled-icons/feather";
+import { Check, Pencil } from "@styled-icons/boxicons-regular";
 import styled, { css } from "styled-components";
-import { Pencil } from "@styled-icons/bootstrap";
 
 interface Props {
     value: string;
@@ -68,7 +67,7 @@ const Swatch = styled.div<{ type: "small" | "large"; colour: string }>`
                   height: 30px;
 
                   svg {
-                      stroke-width: 2;
+                      /*stroke-width: 2;*/
                   }
               `
             : css`
@@ -118,7 +117,7 @@ export default function ColourSwatches({ value, onChange }: Props) {
                                 onClick={() => onChange(swatch)}
                             >
                                 {swatch === value && (
-                                    <Check size={18} strokeWidth={2} />
+                                    <Check size={18} />
                                 )}
                             </Swatch>
                         ))}

src/components/ui/IconButton.tsx

@@ -15,7 +15,7 @@ export default styled.div<Props>`
 
     fill: ${normal};
     color: ${normal};
-    stroke: ${normal};
+    /*stroke: ${normal};*/
 
     a {
         color: ${normal};
@@ -24,7 +24,7 @@ export default styled.div<Props>`
     &:hover {
         fill: ${hover};
         color: ${hover};
-        stroke: ${hover};
+        /*stroke: ${hover};*/
 
         a {
             color: ${hover};

src/components/ui/Radio.tsx

@@ -1,6 +1,6 @@
 import { Children } from "../../types/Preact";
 import styled, { css } from "styled-components";
-import { CircleFill } from "@styled-icons/bootstrap";
+import { Circle } from "@styled-icons/boxicons-regular";
 
 interface Props {
     children: Children;
@@ -48,7 +48,7 @@ const RadioBase = styled.label<BaseProps>`
 
         svg {
             color: var(--foreground);
-            stroke-width: 2;
+            /*stroke-width: 2;*/
         }
     }
 
@@ -95,7 +95,7 @@ export default function Radio(props: Props) {
             }
         >
             <div>
-                <CircleFill size={12} />
+                <Circle size={12} />
             </div>
             <input type="radio" checked={props.checked} />
             <span>

src/components/ui/Tip.tsx

@@ -1,5 +1,5 @@
 import styled from "styled-components";
-import { Info } from "@styled-icons/feather";
+import { InfoCircle } from "@styled-icons/boxicons-regular";
 import { Children } from "../../types/Preact";
 
 export const TipBase = styled.div`
@@ -29,7 +29,7 @@ export const TipBase = styled.div`
 export default function Tip(props: { children: Children }) {
     return (
         <TipBase>
-            <Info size={20} strokeWidth={2} />
+            <InfoCircle size={20} />
             <span>{props.children}</span>
         </TipBase>
     );