Skip to content
ZenAdmin Tech

Icons

The purpose of this documentation is to provide guidelines on how to access and use icons from the “Majestic Icons” pack in our frontend repository. By following these guidelines, developers can ensure consistent and visually appealing icon usage across the application.

Icon Source: Majestic Icons

We have chosen the “Majestic Icons” pack as our primary source for icons. These icons are designed to be visually appealing, consistent, and compatible with modern web applications. The icons are available in a Figma file, making it convenient for designers and developers to collaborate on icon selection and integration.

Accessing Majestic Icons

To access Majestic Icons for use in the frontend repository, follow these steps:

  1. Figma Source File: The (source file)[https://www.figma.com/file/wjPXg89bYTbUP0OYX2aBkD/Icons?node-id=0%3A1&mode=dev] containing Majestic Icons is available in Figma. Make sure you have access to this Figma file.

  2. Selecting Icons: Browse through the Figma file to select the icons you want to use in your frontend components. Icons are categorized for easy navigation.

  3. Exporting Icons: Once you’ve selected an icon, you can export it as a SVG or PNG file directly from Figma. Ensure that you export the icon in a suitable size and format for your application’s requirements.

Integrating Icons into the Frontend

To integrate Majestic Icons into your frontend components, follow these steps:

  1. File Placement: Place the exported icon files in a public/icons/* folder

  2. Importing Icons: Add the path of the icon in the icon.ts file, and export it as a constant. For example:

export const ICONS = {
  calendar: '/icons/calendar/calendar.svg',
  calendarDotGrid2: '/icons/calendar/calendar-dot-grid-2.svg',
  custom: {
    apps: '/icons/custom/apps.svg',
    checkCircleFilled: '/icons/custom/check-cirlce-filled.svg',
    checkCircle: '/icons/custom/check-circle.svg',
  },
}

and then use the SVG charizard component and provide the path

import {SVG} from '@hybr1d-tech/charizard'


return <SVG path={ICONS.attachment} svgClassName={classes.attachment} />