# Combining icons
You can combine multiple icons into a single icon by using SVG in SVG.
This is useful for if you want to be creative and make your own custom icons by combining existing icons.
```SnackPlayer name=State&ext=js&dependencies=react-native-svg,lucide-react-native
import React, {useState, useEffect} from 'react';
import { View, StyleSheet } from 'react-native';
import { Scan, User} from "lucide-react-native";
const App = () => {
return (
);
};
const styles = StyleSheet.create({
container: {
height: '100%',
alignItems: 'center',
display: 'flex',
justifyContent: 'center'
},
});
export default App;
```
This is valid SVG and all SVG properties are supported on the icons.
The `x` and `y` coordinates can be adjusted to position the icons as you like.
## Caveats
When combining icons, you need to make sure that the icon you is in the `viewBox` of the outer icon (24x24).
## With custom SVG elements
You can also use SVG elements to create your own icons.
## Example with notification badge
```SnackPlayer name=State&ext=js&dependencies=react-native-svg,lucide-react-native
import React, {useState, useEffect} from 'react';
import { View, StyleSheet } from 'react-native';
import { Mail } from "lucide-react-native";
import { Circle } from 'react-native-svg';
const App = () => {
const hasUnreadMessages = true;
return (
{hasUnreadMessages && (
)}
);
};
const styles = StyleSheet.create({
container: {
height: '100%',
alignItems: 'center',
display: 'flex',
justifyContent: 'center'
},
});
export default App;
```
## Example with text element
You can also use the `text` SVG element to add text to your icon.
```SnackPlayer name=State&ext=js&dependencies=react-native-svg,lucide-react-native
import React, {useState, useEffect} from 'react';
import { View, StyleSheet } from 'react-native';
import { File } from "lucide-react-native";
import { Text } from 'react-native-svg';
const App = () => {
const hasUnreadMessages = true;
return (
JS
);
};
const styles = StyleSheet.create({
container: {
height: '100%',
alignItems: 'center',
display: 'flex',
justifyContent: 'center'
},
});
export default App;
```