React Native Icons for Fullstack Amazon Ecommerce app

Creating beautiful icons on react native apps is one thing many does not know, but because of this amazon E commerce clone app, we are going to simplify thing the way it should be. Here are the simplified icons you can use on react native.

Icon name: AmazonLogo.tsx

import * as React from 'react';
import {moderateScale} from 'react-native-size-matters';
import Svg, {Path, G} from 'react-native-svg';
import theme from '../components/theme';

export interface IconProps {
  onPress?: () => void;
  size: number;
}

export default ({size}: IconProps) => {
  return (
    <Svg
      width={moderateScale(size)}
      height={moderateScale(size)}
      viewBox="0 0 47.999 14.465">
      <G
        fillRule="evenodd"
        fill={theme.colors['primary']}
        data-name="Group 17"
        strokeWidth={3}>
        <Path
          d="M29.778 11.312a18.285 18.285 0 01-10.316 3.15 18.662 18.662 0 01-12.6-4.808c-.261-.236-.027-.558.286-.374a25.357 25.357 0 0012.605 3.343 25.065 25.065 0 009.615-1.966c.472-.2.867.309.405.652"
          fill={theme.colors['orange']}
        />
        <Path
          d="M30.938 9.985c-.355-.455-2.357-.215-3.255-.109-.274.033-.315-.2-.069-.376 1.594-1.122 4.21-.8 4.515-.422s-.079 3-1.578 4.252c-.23.192-.449.09-.347-.165.336-.84 1.091-2.722.733-3.18"
          fill={theme.colors['orange']}
        />
        <Path d="M27.745 1.58V.489a.269.269 0 01.276-.276h4.883a.272.272 0 01.282.276v.934a1.536 1.536 0 01-.368.685l-2.53 3.612a5.391 5.391 0 012.785.6.5.5 0 01.259.424v1.164c0 .159-.175.345-.359.249a5.625 5.625 0 00-5.159.008c-.169.092-.347-.092-.347-.251V6.807a1.319 1.319 0 01.18-.75l2.931-4.2H28.03a.27.27 0 01-.282-.274M9.933 8.385H8.447a.281.281 0 01-.265-.253V.508a.279.279 0 01.286-.274h1.385a.28.28 0 01.27.255v1h.027a2.041 2.041 0 013.884 0A2.194 2.194 0 0117.805.91a4.057 4.057 0 01.374 2.39v4.812a.281.281 0 01-.286.276H16.41a.282.282 0 01-.267-.276V4.069a9.542 9.542 0 00-.042-1.429.774.774 0 00-.873-.656.987.987 0 00-.888.625 4.615 4.615 0 00-.138 1.46v4.04a.281.281 0 01-.286.276h-1.483a.281.281 0 01-.267-.276V4.068c0-.85.14-2.1-.915-2.1s-1.026 1.22-1.026 2.1v4.041a.281.281 0 01-.286.276M37.389.074c2.2 0 3.4 1.893 3.4 4.3 0 2.325-1.318 4.17-3.4 4.17-2.165 0-3.343-1.893-3.343-4.252S35.239.074 37.389.074m.013 1.557c-1.095 0-1.164 1.492-1.164 2.422s-.015 2.921 1.151 2.921 1.206-1.6 1.206-2.582a7.047 7.047 0 00-.221-2.022.929.929 0 00-.972-.738M43.645 8.385h-1.48a.282.282 0 01-.267-.276V.483a.281.281 0 01.286-.249h1.377a.284.284 0 01.265.213v1.167h.027a2.021 2.021 0 012.025-1.54 1.949 1.949 0 011.734.9 4.846 4.846 0 01.389 2.374v4.8a.285.285 0 01-.286.24h-1.49a.281.281 0 01-.263-.24V4.004c0-.834.1-2.054-.93-2.054a.971.971 0 00-.859.61 3.374 3.374 0 00-.236 1.444v4.105a.286.286 0 01-.29.276M23.852 4.743a2.906 2.906 0 01-.278 1.575 1.207 1.207 0 01-1.028.675c-.57 0-.9-.435-.9-1.076 0-1.266 1.135-1.5 2.211-1.5v.322m1.5 3.621a.31.31 0 01-.351.036 3.621 3.621 0 01-.852-.99 2.942 2.942 0 01-2.449 1.08 2.107 2.107 0 01-2.223-2.315 2.521 2.521 0 011.584-2.428 10.293 10.293 0 012.793-.516v-.189a1.9 1.9 0 00-.182-1.076.989.989 0 00-.834-.387 1.13 1.13 0 00-1.193.892.311.311 0 01-.259.272l-1.44-.155a.262.262 0 01-.221-.311C20.054.527 21.638 0 23.046 0a3.368 3.368 0 012.238.74c.723.675.654 1.575.654 2.555V5.61a2.032 2.032 0 00.56 1.377.281.281 0 01-.006.395c-.3.253-.842.723-1.139.986M4.377 4.743A2.906 2.906 0 014.1 6.318a1.2 1.2 0 01-1.028.675c-.57 0-.9-.435-.9-1.076 0-1.266 1.135-1.5 2.208-1.5v.322m1.5 3.621a.31.31 0 01-.351.036 3.657 3.657 0 01-.852-.99 2.939 2.939 0 01-2.449 1.08A2.108 2.108 0 010 6.174a2.524 2.524 0 011.584-2.428 10.293 10.293 0 012.793-.516v-.192A1.911 1.911 0 004.2 1.962a.994.994 0 00-.834-.387 1.132 1.132 0 00-1.2.892.311.311 0 01-.257.272L.47 2.585a.263.263 0 01-.221-.311C.581.527 2.158 0 3.571 0a3.368 3.368 0 012.237.74c.723.675.654 1.575.654 2.555V5.61a2.032 2.032 0 00.56 1.377.279.279 0 010 .395c-.3.253-.842.723-1.139.986" />
      </G>
    </Svg>
  );
};


Icon Name: Back

import * as React from 'react';
import {moderateScale} from 'react-native-size-matters';
import Svg, {Path, G} from 'react-native-svg';
import theme from '../components/theme';

export interface IconProps {
  onPress?: () => void;
  size: number;
}

export default ({size}: IconProps) => {
  return (
    <Svg
      width={moderateScale(size)}
      height={moderateScale(size)}
      viewBox="0 0 24 24">
      <Path data-name="Path 16" d="M0 0h24v24H0z" fill="none" strokeWidth={3} />
      <Path
        data-name="Path 17"
        strokeWidth={3}
        d="M7.828 11H20v2H7.828l5.364 5.364-1.414 1.414L4 12l7.778-7.778 1.414 1.414z"
        fill={theme.colors['primary']}
      />
    </Svg>
  );
};


Icon Name: Check

import * as React from 'react';
import {moderateScale} from 'react-native-size-matters';
import Svg, {Path} from 'react-native-svg';
import theme from '../components/theme';

export interface IconProps {
  onPress?: () => void;
  size: number;
}

export default ({size}: IconProps) => {
  return (
    <Svg
      width={moderateScale(size)}
      height={moderateScale(size)}
      viewBox="0 0 90 90">
      <Path
        d="M45 0a45 45 0 1045 45A45.016 45.016 0 0045 0zm-9 67.5L13.5 45l6.345-6.345L36 54.765 70.155 20.61 76.5 27z"
        fill="#131a22"
      />
    </Svg>
  );
};


Icon Name: Hamburger

import * as React from 'react';
import {moderateScale} from 'react-native-size-matters';
import Svg, {Path, G} from 'react-native-svg';
import theme from '../components/theme';

export interface IconProps {
  onPress?: () => void;
  size: number;
}

export default ({size}: IconProps) => {
  return (
    <Svg
      width={moderateScale(size)}
      height={moderateScale(size)}
      viewBox="0 0 19 9.401">
      <G
        data-name="Group 18"
        fill="none"
        stroke="#131a22"
        strokeLinecap="round"
        strokeWidth={3}>
        <Path
          data-name="Path 1"
          fill={theme.colors['primary']}
          stroke={theme.colors['primary']}
          strokeWidth={3}
          d="M1 1h17"
        />
        <Path
          data-name="Path 2"
          strokeWidth={3}
          fill={theme.colors['primary']}
          stroke={theme.colors['primary']}
          d="M1 8.401h10"
        />
      </G>
    </Svg>
  );
};


Icon Name: Key

import * as React from 'react';
import {TouchableWithoutFeedback} from 'react-native';
import {moderateScale} from 'react-native-size-matters';
import Svg, {Path, G} from 'react-native-svg';
import theme from '../components/theme';

export interface IconProps {
  onPress?: () => void;
  size: number;
}

export default ({size, onPress}: IconProps) => {
  return (
    <TouchableWithoutFeedback {...{onPress}}>
      <Svg
        width={moderateScale(size)}
        height={moderateScale(size)}
        viewBox="0 0 20 20">
        <Path d="M0 0h20v20H0z" fill="none" strokeWidth={3} />
        <Path
          strokeWidth={3}
          d="M6.111 6.667V5.048A3.971 3.971 0 0110 1a3.971 3.971 0 013.889 4.048v1.619h2.333a.794.794 0 01.778.81v9.713a.794.794 0 01-.778.81H3.778A.794.794 0 013 17.19V7.476a.794.794 0 01.778-.81zm0 1.619H4.556v8.1h10.888v-8.1h-1.555V9.9h-1.556V8.286H7.667V9.9H6.111zm1.556-1.619h4.667V5.048a2.335 2.335 0 10-4.667 0z"
          fill={theme.colors['primary']}
        />
      </Svg>
    </TouchableWithoutFeedback>
  );
};

Icon Name: Microphone

import * as React from 'react';
import {moderateScale} from 'react-native-size-matters';
import Svg, {Path, G} from 'react-native-svg';
import theme from '../components/theme';

export interface IconProps {
  onPress?: () => void;
  size: number;
}

export default ({size}: IconProps) => {
  return (
    <Svg
      width={moderateScale(size)}
      height={moderateScale(size)}
      viewBox="0 0 10.286 16">
      <Path
        strokeWidth={3}
        data-name="Path 7"
        d="M2.286 7.429a2.857 2.857 0 005.714 0V2.857a2.857 2.857 0 00-5.714 0zm0 0"
        fill={theme.colors['bgrey']}
      />
      <Path
        data-name="Path 8"
        d="M9.143 6.286v1.143a4 4 0 11-8 0V6.286H0v1.143a5.149 5.149 0 004.572 5.109V16h1.142v-3.462a5.149 5.149 0 004.572-5.109V6.286zm0 0"
        fill={theme.colors['bgrey']}
      />
    </Svg>
  );
};

Icon Name: Minus

import * as React from 'react';
import {moderateScale} from 'react-native-size-matters';
import Svg, {Path} from 'react-native-svg';
import theme from '../components/theme';

export interface IconProps {
  onPress?: () => void;
  size: number;
}

export default ({size}: IconProps) => {
  return (
    <Svg
      width={moderateScale(size)}
      height={moderateScale(size)}
      viewBox="0 0 10 2">
      <Path
        data-name="Path 18"
        d="M0 1h10"
        fill="none"
        stroke={theme.colors['black']}
        strokeWidth={2}
      />
    </Svg>
  );
};

Icon Name: Plus

import * as React from 'react';
import {moderateScale} from 'react-native-size-matters';
import Svg, {Text, TSpan} from 'react-native-svg';
import theme from '../components/theme';

export interface IconProps {
  onPress?: () => void;
  size: number;
}

export default ({size}: IconProps) => {
  return (
    <Svg
      width={moderateScale(size)}
      height={moderateScale(size)}
      viewBox="0 0 9 15">
      <Text
        data-name="+"
        transform="translate(0 12)"
        fill={theme.colors['primary']}
        fontSize={15}
        fontFamily="CircularStd-Bold, Circular Std Bold"
        fontWeight={700}>
        <TSpan x={0} y={0}>
          {'+'}
        </TSpan>
      </Text>
    </Svg>
  );
};

Icon Name: Search

import * as React from 'react';
import {moderateScale} from 'react-native-size-matters';
import Svg, {Path, G} from 'react-native-svg';
import theme from '../components/theme';

export interface IconProps {
  onPress?: () => void;
  size: number;
}


export default ({size}: IconProps) => {
  return (
    <Svg
      width={moderateScale(size)}
      height={moderateScale(size)}
      viewBox="0 0 15 15">
      <Path data-name="Path 5" d="M0 0h15v15H0z" fill="none" strokeWidth={3} />
      <Path
        strokeWidth={3}
        d="M10.929 10.141l2.385 2.385-.788.788-2.385-2.385a5.014 5.014 0 11.788-.788zm-1.118-.413a3.9 3.9 0 10-.084.084l.084-.084z"
        fill={theme.colors['sgrey']}
      />
    </Svg>
  );
};