> For the complete documentation index, see [llms.txt](https://docs.mapbox.com/android/navigation/ux/llms.txt)

# Icon assets customization

Icons are a crucial visual component of any application. They play a significant role in enhancing user experience by providing intuitive navigation and interaction cues. In this documentation, we'll guide you through the process of replacing icons within your app using the Navigation UX SDK. As an example, let's assume we're implementing a new style where the icons are designed as pixel art images.

### Adding Icon Resources to Your Android Project

Before adding the images to your project, make sure they are in the correct format and resolution. It's crucial to provide images in different resolutions to accommodate various device screen sizes and densities.

1.  **Locate the `res` Directory:** In the Project view, expand the `app > src > main` directory and locate the `res` folder.
    
2.  **Create Drawable Directories (if necessary):** Inside the `res` folder, you should have drawable directories for different densities, like `drawable-mdpi`, `drawable-hdpi`, `drawable-xhdpi`, etc. If these directories do not exist, create them by right-clicking the `res` folder, selecting `New > Android resource directory`, choosing `drawable` as the resource type, and specifying the desired density.
    
3.  **Add Your Images:** Copy your image files into the appropriate `drawable` directories. You can drag and drop the files directly into the folders within Android Studio or use your system's file explorer to copy the files.
    

In our case we will use vector drawables, here's a table illustrating the icons we'll be incorporating

| File name | Icon |
| --- | --- |
| ic_pixel_coffee.xml |  |
| ic_pixel_favorite.xml |  |
| ic_pixel_food.xml |  |
| ic_pixel_fuel.xml |  |
| ic_pixel_home.xml |  |
| ic_pixel_parking.xml |  |
| ic_pixel_recents.xml |  |
| ic_pixel_work.xml |  |

### Updating the Style Attributes

Next, integrate these icons into your application by referencing them in your style definitions. Here's how you can define the icons in your style for both day and night themes:

```xml
<style name="MyStyle" parent="DashTheme.Day">
    <!-- Other attributes -->
    <item name="ic_navux_main_coffee">@drawable/ic_pixel_coffee</item>
    <item name="ic_navux_main_favorite">@drawable/ic_pixel_favorite</item>
    <item name="ic_navux_main_food">@drawable/ic_pixel_food</item>
    <item name="ic_navux_main_fuel">@drawable/ic_pixel_fuel</item>
    <item name="ic_navux_main_home">@drawable/ic_pixel_home</item>
    <item name="ic_navux_main_parking">@drawable/ic_pixel_parking</item>
    <item name="ic_navux_main_recent_outline">@drawable/ic_pixel_recents</item>
    <item name="ic_navux_main_work">@drawable/ic_pixel_work</item>
</style>
```

By following these steps, you can effectively update the icons in your application to align with your desired aesthetic, ensuring a cohesive and engaging user interface.

![UX Framework screenshot showing the customization.](https://docs.mapbox.com/android/assets/ideal-img/dash-sdk-icon-customization.4a747d1.480.png)