React Native Icons for Fullstack Amazon Ecommerce app -
React Native Icons for Fullstack Amazon Ecommerce app
by on on android

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>
  );
};