Icons
The icons are available together as one source file. Add the icon set and its dependency to your app:
npx midestic-rn-library add icons
The CLI copies the icon source into src/icons/ and reports that react-native-svg is required. The icons accept the props of react-native-svg's Svg plus a color shorthand.
import { ArrowLeft, LocationIcon, StarIcon, type IconProps } from "./src/icons";
<ArrowLeft color="#121212" width={26} height={26} onPress={goBack} />
<LocationIcon color="#DE4B65" />
<StarIcon color="#FB9506" width={32} height={32} />
Props
| Prop | Type | Default | Description |
|---|---|---|---|
color | string | per icon | Fill/stroke colour |
width / height | number | per icon | Rendered size |
| ...rest | SvgProps | - | onPress, opacity, testID, ... |
The set
Navigation & arrows: ArrowLeft, ArrowRightIcon, RightArrowIcon, ExpandIcon, MoreIcon.
Inputs & pickers: CalendarIcon, FilledCalendarIcon, SearchIcon, CameraIcon, ImageIcon, EditIcon, PlusIcon, MinusIcon.
Rides & map: LocationIcon, AddLocationIcon, MapIcon, CarIcon, FlagIcon, TimerIcon, TimeIcon, TimeInactiveIcon, RecentRideIcon.
Status & feedback: StatusIcon, StatusDotIcon, SuccessIcon, VerifiedIcon, CheckedIcon, CheckIcon, CheckCircleIcon, StarIcon, StarRatingIcon, TicketIcon.
Calls & chat: PhoneIcon, PhoneMsgIcon, PhoneOffIcon, MessageIcon, MicOffIcon, VolumeIcon.
Account: ProfileIcon, ProfileInactiveIcon, ActiveHomeIcon, HomeInactiveIcon, ActiveEarningIcon, EarningIcon, AccountProfileIcon, NotificationIcon, ContactIcon, ReferralIcon, GiftIcon, LogoutIcon, TermsIcon, SecurityIcon, EmailIcon, SavedAddress.
Money: CurrencyIcon, MoneyIcon.
Shared icons: CopyIcon, SendIcon, ShareIcon.
Type IconProps is exported, so you can build your own wrapper:
export function Chevron({ color = "#121212", size = 24 }: { color?: string; size?: number }) {
return <ArrowRightIcon color={color} width={size} height={size} />;
}