Icon

Icon renders an animated icon from a registered icon pack. Use IconRegistry at the application root to register one or more icon packs (e.g., Eva Icons, Material Icons, FontAwesome).

Import

import { Icon, IconRegistry } from '@ui-kitten/components';

Basic Usage

import React from 'react';
import { ApplicationProvider, Layout, Icon, IconRegistry } from '@ui-kitten/components';
import { EvaIconsPack } from '@ui-kitten/eva-icons';
import * as eva from '@ui-kitten/eva';

const App = () => (
  <>
    <IconRegistry icons={EvaIconsPack} />
    <ApplicationProvider {...eva} theme={eva.light}>
      <Layout style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Icon name="star" fill="#FFD700" style={{ width: 32, height: 32 }} />
      </Layout>
    </ApplicationProvider>
  </>
);

Props

Icon

Property	Type	Default	Description
name	string	-	Name of the icon in the registered icon pack. Required.
pack	string	undefined	Name of the icon pack to use. Defaults to the first registered pack.
animation	'zoom' | 'pulse' | 'shake' | null	'zoom'	Animation type applied to the icon. Pass null to disable animation.
animationConfig	AnimationConfig	undefined	Animation configuration — duration, easing, cycles.

IconProps is generic over the props of the element the icon pack renders. Any additional property — fill, style, width, height — is passed straight through to that element, so the accepted set depends on the icon pack in use. With @ui-kitten/eva-icons these are react-native-svg props.

Icon exposes an imperative API through a ref typed as IconRef:

Method	Signature	Description
startAnimation	(callback?: Animated.EndCallback) => void	Starts the configured animation.
stopAnimation	() => void	Stops the animation.

IconRegistry

Property	Type	Default	Description
icons	IconPack | IconPack[]	-	One or more icon packs to register.
defaultIcons	string | string[]	undefined	Name of the pack, or packs, to use when Icon is rendered without an explicit pack.

Eva Icons

@ui-kitten/eva-icons ships the 490 Eva Icons as data modules plus one renderer, and depends only on react-native-svg.

Export	Type	Description
EvaIconsPack	IconPack	Every Eva icon, for <IconRegistry icons={EvaIconsPack} />. Puts all 490 icons in the bundle.
createEvaIconsPack	(icons: IconData[], name?: string) => IconPack	A pack with only the given icons. Pair with per-icon imports so nothing else is bundled. The pack name defaults to 'eva'.
EvaIcon	React.Component<EvaIconProps>	Renders one icon: <EvaIcon icon={star} fill="#FFD700" width={24} height={24} />. Accepts every react-native-svg prop; style.tintColor becomes the fill, as with Icon.
createEvaIcon	(icon: IconData) => React.Component<EvaIconSvgProps>	Wraps an icon in a named standalone component.
evaIcons	Record<EvaIconName, IconData>	Every icon keyed by name.
EvaIconName	string union	The 490 icon names, for typing your own maps.
IconData	{ name; viewBox?; node: [tag, attributes][] }	The data shape of one icon.

Each icon is also its own module, named after the icon: import star from '@ui-kitten/eva-icons/icons/star', import arrowBackOutline from '@ui-kitten/eva-icons/icons/arrow-back-outline'. See Bundle only the icons you use.

Storybook

Live examples coming soon via Storybook.