Material Design icons
Import the icon component from rocketicons
Place the element wherever you need
Styling
Use the utilities icons-* styling the component. Combining with the power of Tailwind, you should be able achiving any result your project requires.
Utilities for setting icons size. It can be customized or added as your need. Tailwind utilities like size, height and width can be used as well.
Watch icon updates as options change.
Use the colors utilities to colorize the icons. See Tailwind colors section to learn more about it.
Watch icon updates as options change.
Combine the icons utilities changing the colors and the size of the component on the same time. It should be combined on the format icon-{color}-{size} and just one utilitied should be applied at once.
Watch icon updates as options change.
Powered by Tailwind (by NativeWind on React-native), the dark mode variante can be used defined a different appearance when dark mode is enabled.
Change the theme mode and see the changes
Hover, Focus, and and Other States has total power on web, however the NativeWind support is not complete and there are few limitations as described on the official documentation. There is also a dedicated state section on the documentation.
Hover over the icon and see changes