icons

package.json

@@ -18,13 +18,13 @@
     "expo-status-bar": "~1.1.0",
     "react": "17.0.1",
     "react-dom": "17.0.1",
-    "react-icons": "^4.3.1",
     "react-native": "0.64.2",
     "react-native-gesture-handler": "~1.10.2",
     "react-native-modal": "^13.0.0",
     "react-native-reanimated": "~2.2.0",
     "react-native-safe-area-context": "3.3.2",
     "react-native-screens": "~3.8.0",
+    "react-native-vector-icons": "^9.0.0",
     "react-native-web": "0.17.1",
     "react-redux": "^7.2.5",
     "styled-components": "^5.3.3"

src/components/GroceryList/groceries/styles/buttons.js

@@ -1,10 +1,9 @@
 import styled, { css } from 'styled-components'
 //dependencies
-import { MdAddShoppingCart, MdDeleteForever } from 'react-icons/md'
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
-import { FiMenu, FiCheckSquare } from 'react-icons/fi'
-import { CgFileAdd } from 'react-icons/cg'
 //blueprints
 import { Button } from '../../../../styles/componentBlueprints'
+import theme from '../../../../styles/theme';
 
 
 export const WrapperButtons = styled(Button)`
@@ -52,23 +51,12 @@ export const WrapperSelect = styled(Button)`
             bottom:70px; 
             `};
 `
-export const MenuIcon = styled(FiMenu)`
+export const MenuIcon = () => <MaterialCommunityIcons name="menu" color={theme.colors.textB2} size={47} />
-    color: ${({ theme }) => theme.colors.textB2};
+
-    font-size: 47px;
+export const PlusIcon = () => <MaterialCommunityIcons name="cart-plus" color={theme.colors.textB2} size={45} />
-`
+
-export const PlusIcon = styled(MdAddShoppingCart)`
+export const RemoveIcon = () => <MaterialCommunityIcons name="deleter-forever" color={theme.colors.textB2} size={45} />
-color: ${({ theme }) => theme.colors.textB2};
+
-    font-size: 45px;
+export const CheckIcon = () => <MaterialCommunityIcons name="check" color={theme.colors.textB2} size={40} />
-`
+
-export const RemoveIcon = styled(MdDeleteForever)`
+export const ListIcon = () => <MaterialCommunityIcons name="text-box-plus-outline" color={theme.colors.textB2} size={40} />
-color: ${({ theme }) => theme.colors.textB2};
-    font-size: 45px;
-`
-export const CheckIcon = styled(FiCheckSquare)`
-    color: ${({ theme }) => theme.colors.textB2};
-    font-size: 40px;
-`
-export const ListIcon = styled(CgFileAdd)`
-    color: ${({ theme }) => theme.colors.textB2};
-    font-size: 40px;
-`

src/components/GroceryList/groceries/styles/list.js

@@ -1,8 +1,7 @@
 import { Text, TouchableOpacity, View } from 'react-native'
 import styled, { css } from 'styled-components'
-import { MdClose } from 'react-icons/md'
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
-import { BiEditAlt } from 'react-icons/bi'
+import theme from '../../../../styles/theme';
-import { IoChevronDown } from 'react-icons/io5'
 
 export const WrapperGroceryList = styled(View)`
     width:100%;
@@ -60,22 +59,22 @@ export const ListSubtitle = styled(Text)`
     font-size: 17px;
 `
 
-export const ButtonRemoveList = styled(MdClose)`
+const Close = () => <MaterialCommunityIcons name="close" color={theme.colors.textW5} size={28} />
-    color: ${({ theme }) => theme.colors.textW5};
-    height: 28px;
-    width:  28px;
-    margin: 4px 10px 4px 0px;
-`
-export const ButtonEditList = styled(BiEditAlt)`
-    color: ${({ theme }) => theme.colors.textW5};
-    height: 28px;
-    width:  28px;
-    margin: 4px 10px 4px 0px;
-`
-export const IconArrowDown = styled(IoChevronDown)`
-    transform: rotate(${props => props.visible === 'true' ? css`-180deg` : css`0deg`});
 
-    color: ${({ theme }) => theme.colors.textW5};
+export const ButtonRemoveList = styled(Close)`
+    margin: 4px 10px 4px 0px;
+`
+
+const Edit = () => <MaterialCommunityIcons name="pencil" color={theme.colors.textW5} size={28} />
+
+export const ButtonEditList = styled(Edit)`
+    margin: 4px 10px 4px 0px;
+`
+
+const ArrowDown = () => <MaterialCommunityIcons name="chevron-down" color={theme.colors.textW5} size={32} />
+
+export const IconArrowDown = styled(ArrowDown)`
+    transform: rotate(${props => props.visible === 'true' ? css`-180deg` : css`0deg`});
     height: 28px;
     width:  28px;
     margin: 4px;

src/components/GroceryList/products/styles/buttons.js

@@ -1,10 +1,10 @@
 import styled from 'styled-components'
 //dependencies
-import { FiPlus, FiMenu , FiUploadCloud, FiDownloadCloud } from 'react-icons/fi'
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
-import { MdDeleteForever } from 'react-icons/md'
 //blueprints
 import { Button } from '../../../../styles/componentBlueprints'
 import { TextInput } from 'react-native'
+import theme from '../../../../styles/theme';
 
 export const WrapperButtons = styled(Button)`
     position:absolute;
@@ -48,36 +48,12 @@ export const WrapperDownload = styled(Button)`
     
 `
 
-export const MenuIcon = styled(FiMenu)`
+export const MenuIcon = () => <MaterialCommunityIcons name="menu" color={theme.colors.textB2} size={50} />
-    color: ${({theme})=> theme.colors.textB2};
+
-    font-size: 60px;
+export const PlusIcon = () => <MaterialCommunityIcons name="plus" color={theme.colors.textB2} size={60} />
-    @media ${({ theme }) => theme.mediaQueries.below768}{
+
-        font-size: 50px;
+export const UploadIcon = () => <MaterialCommunityIcons name="cloud-upload-outline" color={theme.colors.textB2} size={40} />
-    }
+
-`
+export const DownloadIcon = () => <MaterialCommunityIcons name="cloud-download-outline" color={theme.colors.textB2} size={40} />
-export const PlusIcon = styled(FiPlus)`
+
-    color: ${({theme})=> theme.colors.textB2};
+export const RemoveIcon = () => <MaterialCommunityIcons name="delete-forever" color={theme.colors.textB2} size={45} />
-    font-size: 60px;
-    @media ${({ theme }) => theme.mediaQueries.below768}{
-        font-size: 60px;
-    }
-`
-export const UploadIcon = styled(FiUploadCloud)`
-    font-size: 50px;
-    @media ${({ theme }) => theme.mediaQueries.below768}{
-        font-size: 40px;
-    }
-`
-export const DownloadIcon = styled(FiDownloadCloud)`
-    font-size: 50px;
-    @media ${({ theme }) => theme.mediaQueries.below768}{
-        font-size: 40px;
-    }
-`
-export const RemoveIcon = styled(MdDeleteForever)`
-    color: ${({theme})=> theme.colors.textB2};
-    font-size: 60px;
-    @media ${({ theme }) => theme.mediaQueries.below768}{
-        font-size: 45px;
-    }
-`

src/components/GroceryList/products/styles/listedProduct.js

@@ -1,7 +1,7 @@
 import { View, Text, Image, TouchableOpacity } from 'react-native'
 import styled, { css } from 'styled-components'
 //dependencies
-import { HiCheck } from 'react-icons/hi'
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 //functions
 import LightenDarken from '../../../../functions'
 
@@ -75,7 +75,4 @@ export const StyledImage = styled(Image)`
 `
 
 
-export const IconCheck = styled(HiCheck)`
+export const IconCheck = () => <MaterialCommunityIcons name="check" color={theme.colors.dp00} size={16} />
-    font-size: 16px;
-    color: ${({ theme }) => theme.colors.dp00};
-`

src/components/GroceryList/styles/tabMenu.js

@@ -1,7 +1,7 @@
 import { TouchableOpacity, View } from 'react-native'
 import styled, { css } from 'styled-components'
-import { RiShoppingBasketLine } from 'react-icons/ri'
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
-import { FaAppleAlt } from 'react-icons/fa'
+import theme from '../../../styles/theme';
 
 
 const iconSize = '2.0px'
@@ -19,7 +19,6 @@ export const Wrapper = styled(View)`
     flex-direction: row;
     justify-content: space-evenly;
     align-items: center;
-    /* background-color: #1A2C31cc; */
     background-color: ${({ theme }) => theme.colors.dp00 +'88'};
     width: 250px;
     height: 60px;
@@ -55,7 +54,10 @@ export const WrapperGroceries = styled(WrapperIcon)`
     flex:1;
     height: 65px;
 `
-export const IconGroceries = styled(RiShoppingBasketLine)`
+
+const Groceries = () => <MaterialCommunityIcons name="shopping" color={theme.colors.textW0} size={iconSize} />
+
+export const IconGroceries = styled(Groceries)`
     font-size: ${iconSize};
     ${props => props.currenttab === 'Groceries' &&
         css` 
@@ -69,7 +71,10 @@ export const WrapperProducts = styled(WrapperIcon)`
     height: 65px;
 
 `
-export const IconProducts = styled(FaAppleAlt)`
+
+const Products = () => <MaterialCommunityIcons name="apple" color={theme.colors.textW0} size={iconSize} />
+
+export const IconProducts = styled(Products)`
     font-size: 16px;
     margin-top:-5px;
     ${props => props.currenttab === 'Products' &&

src/components/Home/styles/groceryCard.js

@@ -1,7 +1,8 @@
+import React from 'react'
 import { Text, TouchableOpacity, View } from 'react-native'
 import styled from 'styled-components'
-import { FiCoffee } from 'react-icons/fi'
+import theme from '../../../styles/theme'
-import { GiHotMeal } from 'react-icons/gi'
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 
 export const WrapperLink = styled(View)`
     position: absolute;
@@ -30,13 +31,14 @@ export const TextCard = styled(Text)`
     color: ${props => props.theme.colors.textW2};
     background-color: #0003;
     `
-export const IconCoffee = styled(FiCoffee)`
+const Coffee = () => <MaterialCommunityIcons name="coffee" color={theme.colors.primaryVar} size={50} />
+
+export const IconCoffee = styled(Coffee)`
     margin-top: 15px;
-    color: ${({ theme }) => theme.colors.primaryVar};
-    font-size: 50px;
 `
-export const IconRecipe = styled(GiHotMeal)`
+
+const Meal = () => <MaterialCommunityIcons name="food-turkey" color={theme.colors.primaryVar} size={50} />
+
+export const IconRecipe = styled(Meal)`
     margin-top: 15px;
-    color: ${({ theme }) => theme.colors.primaryVar};
-    font-size: 50px;
 `

src/components/modals/groceries/styles/addItem.js

@@ -1,13 +1,10 @@
 import styled from 'styled-components'
-import { IoFastFood } from 'react-icons/io5'
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
-import {AiOutlineFieldNumber} from 'react-icons/ai'
-import {IoPersonCircleSharp} from 'react-icons/io5'
-import {BiCommentAdd} from 'react-icons/bi'
 import { Image } from 'react-native'
+import theme from '../../../../styles/theme';
 
 export const StyledImage = styled(Image)`
     position: absolute;
-    resize-mode: contain;
     z-index:0;
     opacity: 0.1;
     width: 70%;
@@ -18,20 +15,8 @@ export const StyledImage = styled(Image)`
     border-bottom-left-radius: 15px;
     border-bottom-right-radius: 100px;
 `
-const iconSize = '32px'
+
-export const IconProduct = styled(IoFastFood)`
+export const IconProduct = () => <MaterialCommunityIcons name="food" color={theme.colors.buttonGrey} size={32} />
-    font-size: ${iconSize};
+export const IconAmount = () => <MaterialCommunityIcons name="counter" color={theme.colors.buttonGrey} size={32} />
-    color: ${({theme})=>theme.colors.iconGrey};
+export const IconPerson = () => <MaterialCommunityIcons name="account-circle" color={theme.colors.buttonGrey} size={32} />
-`
+export const IconDetails = () => <MaterialCommunityIcons name="comment-plus-outline" color={theme.colors.buttonGrey} size={32} />
-export const IconAmount = styled(AiOutlineFieldNumber)`
-    font-size: ${iconSize};
-    color: ${({theme})=>theme.colors.iconGrey};
-`
-export const IconPerson = styled(IoPersonCircleSharp)`
-    font-size: ${iconSize};
-    color: ${({theme})=>theme.colors.iconGrey};
-`
-export const IconDetails = styled(BiCommentAdd)`
-    font-size: ${iconSize};
-    color: ${({theme})=>theme.colors.iconGrey};
-`

src/components/modals/groceries/styles/addProduct.js

@@ -1,32 +1,21 @@
 import styled from 'styled-components'
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 
-import { IoFastFood } from 'react-icons/io5'
-import { BsTag } from 'react-icons/bs'
-import { BiDollar ,BiLinkAlt} from 'react-icons/bi'
 import { Image } from 'react-native'
+import theme from '../../../../styles/theme';
 
 export const StyledImage = styled(Image)`
     position: absolute;
-    resize-mode: contain;
     width: 35%;
     height: 50%;
     right:0;
     border-radius: 15px; 
 `
 const iconSize = '32px'
-export const IconProduct = styled(IoFastFood)`
+export const IconProduct = () => <MaterialCommunityIcons name="fast-food" color={theme.colors.iconGrey} size={iconSize} />
-    font-size: ${iconSize};
+
-    color: ${({theme})=>theme.colors.iconGrey};
+export const IconTag = () => <MaterialCommunityIcons name="tag-outline" color={theme.colors.iconGrey} size={iconSize} />
-`
+
-export const IconTag = styled(BsTag)`
+export const IconDollar = () => <MaterialCommunityIcons name="currency-usd" color={theme.colors.iconGrey} size={iconSize} />
-    font-size: ${iconSize};
+
-    color: ${({theme})=>theme.colors.iconGrey};
+export const IconLink = () => <MaterialCommunityIcons name="link" color={theme.colors.iconGrey} size={iconSize} />
-`
-export const IconDollar = styled(BiDollar)`
-    font-size: ${iconSize};
-    color: ${({theme})=>theme.colors.iconGrey};
-`
-export const IconLink = styled(BiLinkAlt)`
-    font-size: ${iconSize};
-    color: ${({theme})=>theme.colors.iconGrey};
-`

src/components/modals/groceries/styles/edit.js

@@ -33,7 +33,6 @@ export const TextTag = styled(Text)`
     margin: 0px 5px;
 `
 export const StyledImage = styled(Image)`
-    resize-mode: contain;
     width:  150px;
     height: 150px;
     margin-top:-50px; 

src/components/modals/recipes/ModalAddIngredients.js

@@ -1,7 +1,6 @@
 import React, { useState } from 'react'
 import styled from "styled-components"
-import { CgFile } from "react-icons/cg"
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
-import { GiMeal } from "react-icons/gi"
 
 import { useDispatch, useSelector } from 'react-redux'
 import { findRecipeById } from '../../../redux/slices/recipesSlice'
@@ -13,16 +12,11 @@ import {
 import Ingredient from '../../recipes/Ingredient&Button'
 import { itemAdded } from '../../../redux/slices/groceryList/itemsSlice'
 import Dropdown from '../../Dropdown'
+import theme from '../../../styles/theme';
 
-const IconList = styled(CgFile)`
+const IconList = () => <MaterialCommunityIcons name="format-list-bulleted" color={theme.colors.primaryVar} size={16} />
-    font-size: 16px;
-    color: ${({ theme }) => theme.colors.primaryVar};
-`
-const IconMeal = styled(GiMeal)`
-    font-size: 16px;
-    color: ${({ theme }) => theme.colors.primaryVar};
-`
 
+const IconMeal = () => <MaterialCommunityIcons name="food" color={theme.colors.primaryVar} size={16} />
 
 const ModalAddIngredients = (props) => {
     const dispatch = useDispatch()

src/components/modals/styles/modal.js

@@ -1,8 +1,8 @@
 import { Text, View, TextInput } from 'react-native'
 import styled from 'styled-components'
 import Modal from 'react-native-modal';
-import { FaAsterisk } from 'react-icons/fa'
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
-import { HiCheck } from 'react-icons/hi'
+import theme from '../../../styles/theme';
 
 export const StyledModal = styled(Modal)`
     .modal-content{
@@ -77,17 +77,18 @@ export const ModalDescription = styled(Text)`
     padding: 2px;
 `
 
-export const IconWrong = styled(FaAsterisk)`
+const Wrong = () => <MaterialCommunityIcons name="asterisk" color={theme.colors.error + 'aa'} size={theme.fontSize.fontS} />
+
+export const IconWrong = styled(Wrong)`
     margin-left: -10px;
     margin-top: -10px;
-    font-size: ${({ theme }) => theme.fontSize.fontS};
-    color: ${({ theme }) => theme.colors.error + 'aa'};
 `
-export const IconCheck = styled(HiCheck)`
+
+const Check = () => <MaterialCommunityIcons name="check" color={theme.colors.primary} size={theme.fontSize.fontM}/>
+
+export const IconCheck = styled(Check)`
     margin-left: -15px;
     margin-top: -3px;
-    font-size: ${({ theme }) => theme.fontSize.fontM};
-    color: ${({ theme }) => theme.colors.primary};
 `
 
 

src/components/recipes/addRecipe/styles/buttons.js

@@ -2,9 +2,8 @@ import { View } from "react-native"
 import styled, {css} from 'styled-components'
 import { Button } from '../../../../styles/componentBlueprints'
 
-import { FiPlus, FiSettings } from 'react-icons/fi'
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
-import { GoTrashcan } from 'react-icons/go'
+import theme from "../../../../styles/theme";
-import { BiEditAlt } from 'react-icons/bi'
 
 export const WrapperAddRecipe = styled(Button)`
     position:absolute;
@@ -16,13 +15,8 @@ export const WrapperAddRecipe = styled(Button)`
         right:10px;
     }
 `
-export const IconPlus = styled(FiPlus)`
+export const IconPlus = () => <MaterialCommunityIcons name="plus" color={theme.colors.textB2} size={60} />
-    color: ${({ theme }) => theme.colors.textB2};
+
-    font-size: 60px;
-    @media ${({ theme }) => theme.mediaQueries.below768}{
-        font-size: 60px;
-    }
-`
 export const WrapperOptions = styled(View)`
     position: absolute;
     top: 0px;
@@ -42,21 +36,23 @@ export const WrapperOptionButtons = styled(View)`
     border-bottom-left-radius: 8px;
     overflow: hidden;
 `
-export const IconOptions = styled(FiSettings)`
+const Options = () => <MaterialCommunityIcons name="cog-outline" color={theme.colors.textW2} size={40} />
+
+export const IconOptions = styled(Options)`
     margin-right: 5px;
     margin-top: 10px;
-    color: ${({ theme }) => theme.colors.textW2};
     transform: rotate(${props => props.toggled ? css`135deg` : css`0deg` });
-    font-size: 40px;
 `
-export const IconRemove = styled(GoTrashcan)`
+
+const Remove = () => <MaterialCommunityIcons name="trash-can-outline" color={theme.colors.error} size={40} />
+
+export const IconRemove = styled(Remove)`
     position: absolute;
-    font-size: 40px;
-    color: ${({ theme }) => theme.colors.error};
 `
-export const IconEdit = styled(BiEditAlt)`
+
+const Edit = () => <MaterialCommunityIcons name="pencil-outline" color={theme.colors.textW2} size={40} />
+
+export const IconEdit = styled(Edit)`
     position: absolute;
     top: 50px;
-    color: ${({ theme }) => theme.colors.textW2};
-    font-size: 40px;
 `

src/components/recipes/addRecipe/styles/ingredient.js

@@ -1,7 +1,8 @@
 import { Text, View } from "react-native"
 import styled from 'styled-components'
-import { GoTrashcan } from 'react-icons/go'
+
-import { BiEditAlt } from 'react-icons/bi'
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+import theme from "../../../../styles/theme";
 
 export const WrapperIngredient = styled(View)`
 margin: 5px 0px;
@@ -47,15 +48,15 @@ font-size: ${({theme}) => theme.fontSize.fontS};
 /* overflow-wrap: break-word; */
 color: ${props => props.theme.colors.textW5};
 `
-export const IconRemove = styled(GoTrashcan)`
+const Remove = () => <MaterialCommunityIcons name="trash-can-outline" color={theme.colors.error + 'aa'} size={theme.fontSize.fontS} />
+
+export const IconRemove = styled(Remove)`
 position:absolute;
 right: 0px;
-color: ${({ theme }) => theme.colors.error + 'aa'};
-font-size: ${({theme}) => theme.fontSize.fontS};
 `
-export const IconEdit = styled(BiEditAlt)`
+const Edit = () => <MaterialCommunityIcons name="pencil-outline" color={theme.colors.textW5} size={theme.fontSize.fontS} />
+
+export const IconEdit = styled(Edit)`
 position:absolute;
 right: 20px;
-color: ${({ theme }) => theme.colors.textW5};
-font-size: ${({theme}) => theme.fontSize.fontS};
 `

src/components/recipes/styles/recipeCard.js

@@ -32,7 +32,6 @@ export const RecipeName = styled(Text)`
 `
 
 export const ImageRecipe = styled(Image)`
-    resize-mode: contain;
     width: 100%;
     height: 100%;
     border-radius: 20px;

src/pages/recipes/styles/addRecipe.js

@@ -1,8 +1,7 @@
 import { Image, Text, TextInput, View } from "react-native"
 import styled from 'styled-components'
-import { GiHotMeal, GiMeal, GiCookingPot } from 'react-icons/gi'
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
-import { HiCheck } from 'react-icons/hi'
+import theme from "../../../styles/theme";
-import { BiImageAdd } from 'react-icons/bi'
 
 export const Wrapper = styled(View)`
     display: flex;
@@ -63,33 +62,23 @@ export const InputInstructions = styled(Text)`
     width: 100%;
 `
 export const StyledImage = styled(Image)`
-    resize-mode: contain;
     width: 100px;
     height: 100px;
 `
-export const IconRecipe = styled(GiHotMeal)`
+export const IconRecipe = () => <MaterialCommunityIcons name="pasta" color={theme.colors.primaryVar} size={theme.fontSize.fontM} />
-    color: ${({ theme }) => theme.colors.primaryVar};
+
-    font-size: ${({theme}) => theme.fontSize.fontM};
+export const IconPot = () => <MaterialCommunityIcons name="pot-steam" color={theme.colors.primaryVar} size={theme.fontSize.fontM} />
-`
+
-export const IconPot = styled(GiCookingPot)`
+export const IconMeal = () => <MaterialCommunityIcons name="pot-steam" color={theme.colors.primaryVar} size={theme.fontSize.fontM} />
-    color: ${({ theme }) => theme.colors.primaryVar};
+
-    font-size: ${({theme}) => theme.fontSize.fontM};
+export const IconImage = () => <MaterialCommunityIcons name="food" color={theme.colors.primaryVar} size={theme.fontSize.fontM} />
-`
+
-export const IconMeal = styled(GiMeal)`
+const Check = () => <MaterialCommunityIcons name="check" color={theme.colors.textB3} size={theme.fontSize.fontL} />
-    margin-left: 5px;
+
-    color: ${({ theme }) => theme.colors.primaryVar};
+export const IconCheck = styled(Check)`
-    font-size: ${({theme}) => theme.fontSize.fontM};
-`
-export const IconImage = styled(BiImageAdd)`
-    color: ${({ theme }) => theme.colors.primaryVar};
-    font-size: ${({theme}) => theme.fontSize.fontM};
-`
-export const IconCheck = styled(HiCheck)`
     margin-right: 10px;
-    color: ${({ theme }) => theme.colors.textB3};
     background-color: ${({ theme }) => theme.colors.primary + 'cc'};
     border-radius: 30px;
     min-width:  40px;
     height:     40px;
-    font-size: ${({theme}) => theme.fontSize.fontL};
 `

src/pages/recipes/styles/recipe.js

@@ -1,6 +1,7 @@
 import { Image, Text, View } from "react-native"
 import styled from 'styled-components'
-import { GiCookingPot, GiMeal } from 'react-icons/gi'
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+import theme from "../../../styles/theme";
 
 export const Title = styled(Text)`
     margin-top: 10px;
@@ -34,7 +35,6 @@ export const InstructionNumber = styled(Text)`
 
 export const StyledImage = styled(Image)`
     margin-top: -70px;
-    resize-mode: contain;
     height: 200px;
     width: 100%;
     @media ${({theme}) => theme.mediaQueries.above768}{
@@ -72,15 +72,16 @@ export const TextServings = styled(Text)`
     margin-top: -5px;
     font-weight: bold;
 `
-export const IconPotLarge = styled(GiCookingPot)`
+const PotLarge = () => <MaterialCommunityIcons name="pot-steam" color={theme.colors.primary} size={theme.fontSize.fontL} />
+
+export const IconPotLarge = styled(PotLarge)`
     margin: -20px 0px -16px 0px;
-    color: ${({ theme }) => theme.colors.primary};
-    font-size: ${({theme}) => theme.fontSize.fontL};
 `
-export const IconMeal = styled(GiMeal)`
+
+const Meal = () => <MaterialCommunityIcons name="food-turkey" color={theme.colors.primary} size={theme.fontSize.fontL} />
+
+export const IconMeal = styled(Meal)`
     margin: -20px 0px -16px 0px;
-    color: ${({ theme }) => theme.colors.primary};
-    font-size: ${({theme}) => theme.fontSize.fontL};
 `
 
 

src/pages/styles/HomePage.js

@@ -1,6 +1,6 @@
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 import { View } from "react-native"
 import styled from 'styled-components'
-import { FiMenu } from 'react-icons/fi'
 
 export const Wrapper = styled(View)`
     display: flex;
@@ -24,7 +24,4 @@ export const WrapperRight = styled(View)`
     width: 50%;
     padding: 0px 8px 8px 4px;
 `
-// export const Menu = styled(FiMenu)`
+export const Menu = () => <MaterialCommunityIcons name="menu" color={theme.colors.textW2} size={45} />
-//     color: ${props=>props.theme.colors.textW2};
-//     font-size: 45px;
-// `

src/pages/styles/page.js

@@ -1,9 +1,4 @@
 import styled from 'styled-components'
-import { BiArrowBack } from 'react-icons/bi'
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 
-export const ArrowBack = styled(BiArrowBack).attrs(props=>({
+export const ArrowBack = () => <MaterialCommunityIcons name="arrow-left" color={theme.colors.textW2} size={45} />
-    // onClick:() => history.goBack()
-}))`
-    color: ${({theme}) => theme.colors.textW2};
-    font-size: 45px;
-`

src/styles/componentBlueprints.js

@@ -2,22 +2,18 @@ import { TouchableOpacity, View } from "react-native"
 import React from 'react'
 import styled, { css } from 'styled-components'
 //deps
-import { HiCheck } from 'react-icons/hi'
-
 import LightenDarken from '../functions'
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+import theme from "./theme";
 //standard button layout 
 export const Button = styled(TouchableOpacity)`
     box-shadow: ${({ theme }) => theme.colors.shadow};
     display: flex;
     align-items: center;
     justify-content: center;
-  width: 80px;
-  height:80px;
-  border-radius: 50px;
-  @media ${({ theme }) => theme.mediaQueries.below768}{
     height: 65px;
     width:  65px;
-  }
+    border-radius: 35px;
 `
 const CheckButtonWrapper = styled(View)`
     display:flex;
@@ -31,14 +27,11 @@ const CheckButtonWrapper = styled(View)`
     margin: 0px 5px ;
     background-color: ${props => props.checked ? props.theme.colors.selected : props.theme.colors.buttonGrey};
     `
-const IconCheck = styled(HiCheck)`
+
-    font-size: ${({ theme }) => theme.fontSize.fontL};
-    color: ${({ theme }) => theme.colors.dp00};
-`
 export const CheckButton = (props) => {
 	return (
 		<CheckButtonWrapper checked={props.checked} >
-			{/* <IconCheck checked={props.checked} /> */}
+            <MaterialCommunityIcons name="check" color={theme.colors.dp00} size={25} />
 		</CheckButtonWrapper>
 	)
 }

yarn.lock

@@ -2090,6 +2090,15 @@ cliui@^6.0.0:
     strip-ansi "^6.0.0"
     wrap-ansi "^6.2.0"
 
+cliui@^7.0.2:
+  version "7.0.4"
+  resolved "https://registry.yarnpkg.com/cliui/-/cliui-7.0.4.tgz#a0265ee655476fc807aea9df3df8df7783808b4f"
+  integrity sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==
+  dependencies:
+    string-width "^4.2.0"
+    strip-ansi "^6.0.0"
+    wrap-ansi "^7.0.0"
+
 clone-deep@^4.0.1:
   version "4.0.1"
   resolved "https://registry.npmjs.org/clone-deep/-/clone-deep-4.0.1.tgz"
@@ -2908,7 +2917,7 @@ gensync@^1.0.0-beta.2:
   resolved "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz"
   integrity sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==
 
-get-caller-file@^2.0.1:
+get-caller-file@^2.0.1, get-caller-file@^2.0.5:
   version "2.0.5"
   resolved "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz"
   integrity sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==
@@ -4636,11 +4645,6 @@ react-dom@17.0.1:
     object-assign "^4.1.1"
     scheduler "^0.20.1"
 
-react-icons@^4.3.1:
-  version "4.3.1"
-  resolved "https://registry.npmjs.org/react-icons/-/react-icons-4.3.1.tgz"
-  integrity sha512-cB10MXLTs3gVuXimblAdI71jrJx8njrJZmNMEMC+sQu5B/BIOmlsAjskdqpn81y8UBVEGuHODd7/ci5DvoSzTQ==
-
 react-is@^16.13.0, react-is@^16.13.1, react-is@^16.7.0, react-is@^16.8.1:
   version "16.13.1"
   resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
@@ -4708,6 +4712,20 @@ react-native-screens@~3.8.0:
   dependencies:
     warn-once "^0.1.0"
 
+react-native-vector-icons@^9.0.0:
+  version "9.0.0"
+  resolved "https://registry.yarnpkg.com/react-native-vector-icons/-/react-native-vector-icons-9.0.0.tgz#ab38ec6941f3f340d39846f1e8300e59863e2fb1"
+  integrity sha512-qKX5d5/TafHmI4B7UOSZCL3BAGh7ZfF30iLwRgxBkKfZl2lKSuHp8Ottj9OyWh9b5fFtlg+LtyvZrns3g2kh+w==
+  dependencies:
+    lodash.frompairs "^4.0.1"
+    lodash.isequal "^4.5.0"
+    lodash.isstring "^4.0.1"
+    lodash.omit "^4.5.0"
+    lodash.pick "^4.4.0"
+    lodash.template "^4.5.0"
+    prop-types "^15.7.2"
+    yargs "^16.1.1"
+
 react-native-web@0.17.1:
   version "0.17.1"
   resolved "https://registry.npmjs.org/react-native-web/-/react-native-web-0.17.1.tgz"
@@ -5727,6 +5745,15 @@ wrap-ansi@^6.2.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
+wrap-ansi@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
+  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
 wrappy@1:
   version "1.0.2"
   resolved "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz"
@@ -5817,6 +5844,11 @@ y18n@^4.0.0:
   resolved "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz"
   integrity sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==
 
+y18n@^5.0.5:
+  version "5.0.8"
+  resolved "https://registry.yarnpkg.com/y18n/-/y18n-5.0.8.tgz#7f4934d0f7ca8c56f95314939ddcd2dd91ce1d55"
+  integrity sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==
+
 yallist@^4.0.0:
   version "4.0.0"
   resolved "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz"
@@ -5830,6 +5862,11 @@ yargs-parser@^18.1.2:
     camelcase "^5.0.0"
     decamelize "^1.2.0"
 
+yargs-parser@^20.2.2:
+  version "20.2.9"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-20.2.9.tgz#2eb7dc3b0289718fc295f362753845c41a0c94ee"
+  integrity sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==
+
 yargs@^15.1.0, yargs@^15.3.1:
   version "15.4.1"
   resolved "https://registry.npmjs.org/yargs/-/yargs-15.4.1.tgz"
@@ -5847,6 +5884,19 @@ yargs@^15.1.0, yargs@^15.3.1:
     y18n "^4.0.0"
     yargs-parser "^18.1.2"
 
+yargs@^16.1.1:
+  version "16.2.0"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-16.2.0.tgz#1c82bf0f6b6a66eafce7ef30e376f49a12477f66"
+  integrity sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==
+  dependencies:
+    cliui "^7.0.2"
+    escalade "^3.1.1"
+    get-caller-file "^2.0.5"
+    require-directory "^2.1.1"
+    string-width "^4.2.0"
+    y18n "^5.0.5"
+    yargs-parser "^20.2.2"
+
 yocto-queue@^0.1.0:
   version "0.1.0"
   resolved "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz"