Icon

<bh-icon> | BharatIcon

The bh-icon component provides a versatile way to display icons in your application with customizable size, color, and style variants.

Open in

Basic Usage

Preview

Open in

HTML

<bh-icon name="bell"></bh-icon>
<bh-icon name="arrow-repeat" ></bh-icon>
<bh-icon name="wifi" ></bh-icon>
<bh-icon name="chat"></bh-icon>

React

import React from 'react';
import { BharatIcon } from 'bharat-ui/react/components/icon';

function App() {
  return (
      <BharatIcon name="bell" ></BharatIcon>
      <BharatIcon name="arrow-repeat"></BharatIcon>
      <BharatIcon name="wifi" ></BharatIcon>
      <BharatIcon name="chat"></BharatIcon>
  );
}
export default App;

Icon Sizes

Use the size attribute to control the icon dimensions.

Preview

Open in

HTML

  <bh-icon name="people" size="16px"></bh-icon>
  <bh-icon name="image" size="24px"></bh-icon>
  <bh-icon name="gear" size="32px"></bh-icon>
  <bh-icon name="pencil" size="48px"></bh-icon>

React

import React from 'react';
import { BharatIcon } from 'bharat-ui/react/components/icon';

function App() {
  return (
    <>
    <BharatIcon name="people" size="16px"></BharatIcon>
    <BharatIcon name="image" size="24px"></BharatIcon>
    <BharatIcon name="gear" size="32px"></BharatIcon>
    <BharatIcon name="pencil" size="48px"></BharatIcon>
  </>
  );
}
export default App;

Icon Colors

Customize the icon color using the color attribute.

Preview

Open in

HTML

  <bh-icon name="globe" color="#000000"></bh-icon>
  <bh-icon name="wifi" color="#3b82f6"></bh-icon>
  <bh-icon name="lock" color="#10b981"></bh-icon>
  <bh-icon name="calendar" color="#ef4444"></bh-icon>
  <bh-icon name="search" color="#f59e0b"></bh-icon>

React

import React from 'react';
import { BharatIcon } from 'bharat-ui/react/components/icon';

function App() {
  return (
    <>
     <BharatIcon name="globe" color="#000000"></BharatIcon>
    <BharatIcon name="wifi" color="#3b82f6"></BharatIcon>
    <BharatIcon name="lock" color="#10b981"></BharatIcon>
    <BharatIcon name="calendar" color="#ef4444"></BharatIcon>
    <BharatIcon name="search" color="#f59e0b"></BharatIcon>
  </>
  );
}
export default App;

Style Types

Icons come in different style variants using the styleType attribute.

Preview

Open in

HTML

<bh-icon name="heart" size="32px" color="white" styleType="outlined"></bh-icon>
<bh-icon name="star" size="24px" color="gold" styleType="filled"></bh-icon>
<bh-icon name="star" size="24px" color="yellow" styleType="outlined"></bh-icon>
<bh-icon name="github" size="32px" color="cyan" styleType="outlined" link="https://github.com"></bh-icon>

React

import React from 'react';
import { BharatIcon } from 'bharat-ui/react/components/icon';

function App() {
  return (
    <>
    <BharatIcon name="heart" size="32px" color="white" styleType="outlined"></BharatIcon>
    <BharatIcon name="star" size="24px" color="gold" styleType="filled"></BharatIcon>
    <BharatIcon name="star" size="24px" color="yellow" styleType="outlined"></BharatIcon>
    <BharatIcon name="github" size="32px" color="cyan" styleType="outlined" link="https://github.com"></BharatIcon>
  </>
  );
}
export default App;

Properties

Property	Type	Description
name	string	The name of the icon to display
color	string	The color of the icon in any valid CSS format
size	string	The size of the icon in any valid CSS format
styleType	string	The style variant of the icon (outlined, filled)
link	string	Add clickable link on the icon