Neo's Personal Matrix


    0.1.3 • Public • Published


    Simple, generic and flexible json-based icon-management.

    This library is NOT to be confused with specific Icon-support-libraries like react-native-vector-icons.

    The purpose is to support individual icons and to apply their style and size only once or once per Icon-group.

    Insead of

    <Image source={....} width={32} height={32} style={....}/>

    one can use the Ikon-component and apply the styles, width and height in an json based object structure:

    <Ikon name="themes.default.lessons"/>

    The render-function of <Ikon> will look up an IconSet-structure to pick relevant values like 'width' and 'height' by the name that was passed to the Ikon-component. If these attributes are not present, it will traverse up the IconSet-structure unless the attribute could be found. This way, nested groups are supported and will read inherited values from their parent.


    0.1.2 -> Property "onPress" (optional) added to provide button-functionality

    0.1.1 -> fix for redux (if used)

    Example of an iconSet:

    export const iconSet = {
          autoScale: true,
          width: 32,
          height: 16,
          lessons: {
            // defaults:
            resizeMode: 'stretch',
            $disabled: {
              opacity: 0.6
            // specific icon
            openLesson: {
              source: require('./img/icon-open.png'),
            // specific icon
            closeLesson: {
              source: require('./src/img/icon-open.png'),
              transform:[{rotate: '180 deg'}],
            help: {
              source: require('./src/img/icon-help.png'),
              height: 16 // <--- different height

    How to use:

    Somewhere in the code (e.g. the root component), just register the IconSet:

    import {iconSet} from './iconSet';
    import Ikon from 'react-native-ikon';

    In the render-functions:

    <Ikon name="lessons.openLesson" />

    Special mode: "disabled" icons

    It is also possible to specify an icon as "disabled":

    <Ikon name="lessons.openLesson" disabled={true} />

    If disabled, it will look up a specific node in the iconSet with the name "$.disabled" and apply all their attributes to the <Image>-component. If $disabled was not found, it will default to an opacity of 0.5.

    Make it touchable with "onPress"

    It is also possible to encapsulate this icon within a TouchableOpacity to make it like a button:

    <Ikon name="lessons.openLesson" onPress={this.onMyIconPressed} disable={true/false} />

    The optional property "disabled" will be passed instead to the TouchableOpacity in this case to provide native feeling of a disabled Touchable-component.


    If the attribute autoScale is true, the width and height will be automatically adjusted to the screensize in the same way like Facebook did it in f8app.


    The following props are supported being passed into the < Icon >-Tag, where they do override any settings in the IconSet-Structure.


    Contributors are welcome! Feel free to submit pull requests or open discussions.


    Hagen Hübel, Munich/Starnberg, Germany

    Fullstack developer, currently massive ReactNative developer & consultant



    npm i react-native-ikon

    DownloadsWeekly Downloads






    Last publish


    • hagen