Icon library for React and React Native that integrates with Tailwind for consistent styling across web and mobile. Uses one codebase without changes.
Features
React and React Native Support
Use icons seamlessly on web and mobile platforms with React and React Native integration without any changes.
Tailwind Integration
Utilize Tailwind's power for styling icons, providing consistent and customizable design options.
Single Code Base
A unified codebase that works across different platforms, ensuring consistency and ease of use.
React and React Native Support
Allows icons to be used seamlessly in React and React Native applications without needing alterations, saving development time.
Tailwind Integration
The icons are designed to work well with Tailwind, allowing for easy customization and theming according to Tailwind's utilities.
Responsive Design
Icons support responsive design, making it easy to adjust their size and appearance across different devices.
Dark Mode Compatibility
Icons have styles that work well with dark mode settings, ensuring visibility and aesthetics.
Tailwind CSS Integration
Rocketicons utilizes Tailwind CSS classes for styling, making it easy to customize and integrate into applications.
React and React Native Support
Provides a collection of icons for use in React web and React Native projects.
Cross-Platform Compatibility
The icons are designed to be used in both web and mobile applications with a single code base.
rocketicons
A collection of 1 icon.
Bootstrap Icons
A collection of 2,716 icons, perfect for Bootstrap projects.
Devicons
A collection of 192 icons related to development tools and practices.
Flat Color Icons
A set of 329 flat color icons, useful for various design projects.
Github Octicons Icons
A collection of 273 icons designed with GitHub in mind.
Ant Design Icons
A set of 789 icons catering to Ant Design's design language.
BoxIcons
A vibrant set of 1,634 icons for different uses.
css.gg
Comprises 704 icons, useful for modern web development needs.
Circum Icons
Features 288 simple, rounded icons.
Font Awesome 5
Contains 1,611 icons from the Font Awesome 5 collection.
Font Awesome 6
Includes an extended set of 2,024 icons from Font Awesome 6.
Feather
A set of 287 simple and open-source icons.
Game Icons
A vast set of 4,040 icons dedicated to gaming.
Grommet-Icons
A set of 635 icons used within the Grommet framework.
Heroicons 2
Features 876 icons with a focus on general usage.
IcoMoon Free
A collection of 491 commercially-free icons.
Ionicons 5
Contains 1,332 premium icons by Ionic.
Material Design Icons
Features 4,341 icons that align with Google's Material Design.
Heroicons
Includes 460 handcrafted icons.
Ionicons 4
Comprises 696 icons from Ionic's earlier collection.
Icons8 Line Awesome
A set of 1,544 line-based icons by Icons8.
Lucide
A collection of 1,215 open source icons.
Phosphor Icons
Features 7,488 flexible and beautiful icons.
Remix Icon
Contains 2,537 concise and elegant icons.
Icon Importing
Rocketicons allows you to import icons using a specific import path related to the sub-package. For example, you can import RcRocketIcon from 'rocketicons/rc'.
Component Usage
Once the icon component is imported, you can easily integrate it into your application by adding it in the necessary part of your code, e.g., using <RcRocketIcon />.
Responsive Design
The tool provides capabilities for responsive design, allowing icons to adapt to different screen sizes effectively.
Styling and Customization
Rocketicons offers several styling options and customization features to ensure icons integrate well with your application's design style. This includes color settings, dark mode considerations, and handling of hover, focus, and other states.
Color Inheritance
Use the 'icon-inherit' class to inherit the color of the parent element. It sets the color property to 'inherit'.
Current Color Usage
Use the 'icon-current' class to set the color to the currentColor value. This allows the icon to take the current text color set by 'currentColor'.
Transparent Color
Apply the 'icon-transparent' class to make the icon color transparent. It sets color property to 'transparent'.
Black Color
The 'icon-black' class sets the icon color to black using 'color: rgb(0 0 0)'.
White Color
The 'icon-white' class sets the icon color to white using 'color: rgb(255 255 255)'.
Slate Colors
Various slate colors like 'icon-slate-50', 'icon-slate-100', etc., provide different shades of gray using specific RGB values like 'rgb(248 250 252)', 'rgb(241 245 249)', etc.
Dark Mode Styling
Allows you to style icons differently when dark mode is enabled. This is done using classes like 'icon-sky-900-6x' for normal mode and 'dark:icon-sky-500-6x' for dark mode.
Variants for Dark Mode
Use the 'dark:' variant to define specific styles for dark mode. You can control how icons appear by adjusting their styles when the page theme changes.
Responsive Design
Allows utility classes to be applied conditionally at different breakpoints, enabling the building of complex responsive interfaces. Integrated with Tailwind for available utilities and variants.
Shortcuts for Icons
Shortcuts are a combination of color and size utilities that allow you to change both properties at once. This makes it easier to configure the appearance of icons quickly by using combined utilities instead of separate ones for each property.
Icon Sizing
Provides utilities for controlling the size of an icon by using different classNames. Each class defines a specific width and height for the icon.
State Modifiers
Allows you to apply CSS styles conditionally based on states like hover and focus. For example, 'hover:border-slate-600' adds a border color when an element is hovered over.
React Native Compatibility Note
Informs users that state support on React Native is not complete and directs them to NativeWind documentation for further details.
First, Last, Odd, and Even Selectors
Lets you apply styles to elements based on their position within a group, such as first-child or last-child, using specific modifiers. This feature is marked as not available for React Native, with further information provided by NativeWind.
Defining Background
Allows you to use Tailwind utilities to set the icons' background.
Stroke Width
This feature enables customization of the stroke width of the icons using specific CSS classes.
Borders
You can add borders to the icons using Tailwind's border utilities.
Rounded Corners
Utilize Tailwind's rounding utilities to apply rounded corners to icons.
Dark Mode
Allows users to switch the interface to a dark theme for better visibility in low-light environments.
Responsive Design
Ensures that the icons adjust seamlessly across various devices and screen sizes.
Hover, Focus and Other States
Customize the icons' behavior when hovered over or focused to enhance interactivity.
Styling
Users can style the icons according to their project's needs, applying different CSS properties.
Icon Collections
The platform offers a variety of icon collections including Ant Design Icons, BoxIcons, Bootstrap Icons, and more. Each collection provides different styles and functionalities catering to diverse design needs.
Icon Search and Selection
Users can search for and select icons from the available collections, streamlining the process of finding the right visual elements for their projects.
Documentation and Usage Guidelines
Comprehensive documentation is available to guide users on installation, configuration, customization, and other best practices when using the icons.
Customization Options
The platform supports customization options for icons, allowing users to adjust colors, sizes, and styles to fit their specific design requirements.
Integration Features
Icons can be easily integrated into various projects with support for different platforms, enhancing the flexibility and usability of the icons.
Icon Set
A collection of 1,634 Boxicons available for use. These icons come in different styles and can be customized with various options for integration into web and application projects.
MIT License
The Boxicons are licensed under the MIT License, allowing free use, distribution, and modification with proper attribution.
GitHub Repository
The collection is available on GitHub, providing access to the source files and allowing developers to contribute or integrate directly from the repository.
Bootstrap Icons
A set of over 2,700 icons available in SVG and variable icon fonts for Bootstrap. These icons can be used for various UI elements and are customizable.
MIT License
Icons are open source and available for free use under the MIT license, allowing for easy integration into both personal and commercial projects.
GitHub Repository
The icons can be accessed via the official GitHub repository at https://github.com/twbs/icons. Users can contribute or browse icon updates and source files.
704 Icons Available
The page offers a total of 704 icons from the Css.Gg collection.
MIT License
Icons in this collection are available under the MIT License, allowing for a lot of flexibility in use.
GitHub Repository
The icons are available on GitHub at https://github.com/astrit/css.gg, allowing users to contribute or download.
288 Icons
Contains a collection of 288 Circum themed icons that can be used in various projects.
MPL-2.0 License
Icons are available under the MPL-2.0 license, allowing for flexible usage in projects.
Responsive Design Support
The icons can adapt to different screen sizes, maintaining usability on various devices.
Customization Options
Users can customize the icons according to their design needs, including color and size adjustments.
Dark Mode Compatibility
The icons are compatible with dark mode, ensuring they display well in dark themed designs.
Integration with CSS
Easily integrate the icons into projects using CSS for styling and manipulation.
Icon Library
Offers a collection of Developer Icons (Devicons) for integration into projects. Each icon represents a technology or tool, making it easy to visually indicate toolsets.
Installation Instructions
Provides guidelines on how to install the icons into your project, ensuring smooth integration.
Styling and Customization
Offers options for customization and styling of the icons to fit the design of the project.
Responsive Design Support
Icons are designed to be responsive, adapting to different screen sizes and resolutions.
Icon Library
Provides access to a large collection of over 1,611 Font Awesome 5 icons for use in web and design projects.
License Information
Icons are provided under the CC BY 4.0 License, allowing for sharing and adaptation with appropriate credit.
Categories
Icons are organized into different categories such as brand icons, social media, and more.
Search Functionality
Includes a search bar for quickly finding specific icons from the library.