If you're seeing this message, that means JavaScript has been disabled on your browser, please enable JS to make this app work.Simple Design System

Icon

An icon is a visual representation of a file, application, or action.

  • Examples
  • API

Basic

import Icon from '@atoms/icon/Icon';
import { FaUser } from 'react-icons/fa';

const IconBasic = () => {
  return (
    <>
      <Icon icon={<FaUser />} />
    </>
  );
};

export default IconBasic;

Flip

import Icon from '@atoms/icon/Icon';
import { FaBiking } from 'react-icons/fa';

const IconFlip = () => {
  return (
    <>
      <Icon icon={<FaBiking />} />
      <Icon icon={<FaBiking />} flip="horizontal" />
      <Icon icon={<FaBiking />} flip="vertical" />
      <Icon icon={<FaBiking />} flip="both" />
    </>
  );
};

export default IconFlip;

Rotate

import Icon from '@atoms/icon/Icon';
import { FaHorse } from 'react-icons/fa';

const IconRotate = () => {
  return (
    <>
      <Icon icon={<FaHorse />} />
      <Icon icon={<FaHorse />} rotate={90} />
      <Icon icon={<FaHorse />} rotate={180} />
      <Icon icon={<FaHorse />} rotate={270} />
    </>
  );
};

export default IconRotate;

Animation

import Icon from '@atoms/icon/Icon';
import { FaSpinner } from 'react-icons/fa';

const IconAnimation = () => {
  return (
    <>
      <Icon icon={<FaSpinner />} animation="spin" />
      <Icon icon={<FaSpinner />} animation="pulse" />
      <Icon icon={<FaSpinner />} animation="fade" />
      <Icon icon={<FaSpinner />} animation="beat" />
      <Icon icon={<FaSpinner />} animation="bounce" />
    </>
  );
};

export default IconAnimation;