Skip to main content

Icon

An icon is a small graphic symbol or image used to represent an idea, action, or object, often in digital interfaces or designs. It simplifies communication by visually conveying meaning without using text.

Vector icon

Usage​

import {Icon} from "@/components";
import React from "react";

export const HomeScreen = () => {
  return <Icon icon="home" variant="svg" color="primary" size={10} />;
};

export default HomeScreen;

Props​

variant​

Type: 'vector' | 'svg' | 'image' | 'animation'

Determines the type of icon to be rendered.

<Icon icon="home" variant="svg" />

size​

Type: number

Specifies the size of the icon. The size corresponds to values defined in the theme's spacing object.

<Icon icon="home" variant="svg" size={8} />

color​

Type: string

Specifies the color of the icon. The color should match a name defined in the theme's color object.

<Icon icon="home" variant="vector" color="success" />

icon​

Type: string

Specifies the name of the icon to display. The name should correspond to a valid icon from the constants, images, animations, or Vector Icons.

<Icon icon="home" variant="vector" color="home" />

type​

Type: string

Used when the variant is set to vector. Specifies the type of vector icon. Accepts the following keys:

  • ant: AntDesign
  • entypo: Entypo
  • evil: EvilIcons
  • fa: FA
  • fa5: FA5
  • feather: Feather
  • fontisto: Fontisto
  • foundation: Foundation
  • ionicon: Ionicons
  • material: MaterialIcons
  • materialCommunity: MaterialCommunityIcons
  • octicon: Octicons
  • simpleLine: SimpleLineIcons
  • zocial: Zocial
<Icon icon="home" variant="vector" type="ant" color="home" />