Files
lucide/docs/guide/react-native/basics/sizing.md
Eric Fennis 979e07fbf9 Add examples
2025-11-28 17:22:23 +01:00

1.3 KiB

Sizing

By default, the size of all icons is 24px by 24px. The size is adjustable using the size prop and CSS.

Adjusting the icon size using the size prop

import React, {useState, useEffect} from 'react';
import { View } from 'react-native';
import { Landmark } from "lucide-react-native";

const style = { height: '100%', alignItems: 'center', display: 'flex', justifyContent: 'center' }

const App = () => {
  return (
    <View style={style}>
      <Landmark size={48}  />
    </View>
  );
};

export default App;

Adjusting the icon size via the style prop

The style properties width and height can be used to adjust the icon size.

import React, {useState, useEffect} from 'react';
import { View, StyleSheet } from 'react-native';
import { Landmark } from "lucide-react-native";

const styles = StyleSheet.create({
  container: {
    height: '100%',
    alignItems: 'center',
    display: 'flex',
    justifyContent: 'center'
  },
  icon: {
    width: 48,
    height: 48
  },
});

const App = () => {
  return (
    <View style={styles.container}>
      <Landmark style={styles.icon}  />
    </View>
  );
};

export default App;