Skip to content

icons.md

Latest commit

 

History

History
99 lines (73 loc) · 7.28 KB

icons.md

File metadata and controls

99 lines (73 loc) · 7.28 KB

Icons Documentation

Introduction

This document provides an overview of all the icons used in the app. Icons in this project come from two sources:

  1. Expo Vector Icons – Open-source icons from the @expo/vector-icons library. These icons are imported directly from the library and support various icon sets like Ionicons, MaterialIcons, Feather, etc. Those icons can refer through icons expo website.

  2. Local SVG Icons – Custom icons saved as SVG files in the project (~/src/icons/<icon-name>.svg) and imported as React components.

This documentation serves as a single reference for all icons, their sources, usage examples, and notes for developers and designers.

Example Usage

1. Expo Vector Icons

// Icon: <IconName>
// Library: @expo/vector-icons
// Icon Set: <IconSetName> (e.g., Ionicons, MaterialIcons)
// Type: Vector Icon

import { <IconName> } from '@expo/vector-icons'

export const <IconName>Example = () => {
  return (
    <<IconName> name="<icon-name>" size={24} color="#000" />
  )
}

Notes:

  • Replace IconName and icon-name corresponding to the icons you want to use. Refer table or icons expo website
  • Changing colors and size by simply use color and size props

2. Local SVG Icons

// Icon: <IconName>
// File: ~/icons/<file-name>.svg
// Type: Local SVG

import <IconName> from '~/icons/<file-name>.svg'

export const <IconName>Example = () => {
  return (
    <<IconName> width={24} height={24} fill="#000" />
  )
}

Notes:

  • Replace IconName and file-name corresponding to the icons you want to use. Refer table or ~/src/icons/ folder to review available icons.
  • Changing colors and size by using width, height and fill props

You can add your own icons by

3. Icon Overview Table

Here are overview icons that already used in the app

1. Expo Vector Icons

Icon Name IconName icon-name Library Usage Example Notes
Chevron Entypo chevron-left import { Entypo } from '@expo/vector-icons' <Entypo name="chevron-left" size={24} color="black" /> Back Button
Chevron Entypo chevron-right import { Entypo } from '@expo/vector-icons' <Entypo name="chevron-right" size={24} color="black" /> Forward Button
Light Bulb FontAwesome6 lightbulb import { FontAwesome6 } from '@expo/vector-icons' <FontAwesome6 name="lightbulb" size={24} color="black" /> Light Toggle
Temperature FontAwesome6 temperature-half import { FontAwesome6 } from '@expo/vector-icons' <FontAwesome6 name="temperature-half" size={24} color='black' /> Temperature Normal
Community Ionicons people-outline import { Ionicons } from '@expo/vector-icons' <Ionicons name="people-outline" size={24} color='black' /> Community Tab
Globe Ionicons globe-sharp import { Ionicons } from '@expo/vector-icons' <Ionicons name="globe-sharp" size={24} color="black" /> Translation Icon
Home Ionicons home-outline import { Ionicons } from '@expo/vector-icons' <Ionicons name="home-outline" size={24} color='black' /> Home Tab
Music Ionicons musical-note import { Ionicons } from '@expo/vector-icons' <Ionicons name="musical-note" size={24} color="black" /> Music Toggle
Notification Ionicons notifications import { Ionicons } from '@expo/vector-icons' <Ionicons name="notifications" size={24} color="black" /> Notification Button
Privacy Ionicons shield import { Ionicons } from '@expo/vector-icons' <Ionicons name="shield" size={24} color="black" /> Privacy Icon
Profile Ionicons person-outline import { Ionicons } from '@expo/vector-icons' <Ionicons name="person-outline" size={24} color='black' /> Profile Tab
Profile Ionicons person import { Ionicons } from '@expo/vector-icons' <Ionicons name="person" size={24} color='black' /> Profile Icon
AI MaterialCommunityIcons human-child import { MaterialCommunityIcons } from '@expo/vector-icons' <MaterialCommunityIcons name="human-child" size={24} color='black' /> Ai Tab
Menu MaterialCommunityIcons menu-open import { MaterialCommunityIcons } from '@expo/vector-icons' <MaterialCommunityIcons name="menu-open" size={24} color="black" /> Open Menu
Monitoring MaterialCommunityIcons human-child import { MaterialCommunityIcons } from '@expo/vector-icons' <MaterialCommunityIcons name="human-child" size={24} color='black' /> Monitoring Tab
Motion MaterialCommunityIcons motion-sensor import { MaterialCommunityIcons } from '@expo/vector-icons' <MaterialCommunityIcons name="motion-sensor" size={24} color="black" /> Motion Sensor Icon
Payments MaterialIcons payments import { MaterialIcons } from '@expo/vector-icons' <MaterialIcons name="payments" size={24} color="black" /> Payment Icon, Cash icon
Swap MaterialIcons swap-horiz import { MaterialIcons } from '@expo/vector-icons' <MaterialIcons name="swap-horiz" size={24} color="black" /> Swap Button

2. Local SVG Icons

Icon Name Type Source Import Path / Library Usage Example Notes
LeftChevron SVG Local ~/icons/left-chevron-icn.svg <LeftChevron width={24} height={24} /> Navigation back button
Home Vector Expo import { Ionicons } from '@expo/vector-icons' <Ionicons name="home-outline" size={24} color="black" /> Main tab icon
... ... ... ... ... ...

4. Outro / Notes

  • Keep this document updated whenever a new icon is added or removed.

  • Group icons by feature, screen, or component for easier reference.

  • Include any active/inactive states or conditional variations if applicable.

  • This serves as a single source of truth for developers and designers when working with icons in the app.