https://github.com/icons-pack/react-simple-icons
📦 This package provides the Simple Icons packaged as a set of React components.
https://github.com/icons-pack/react-simple-icons
brands codea components desing icons icons-pack iconset logo react react-simple-icons simple-icons svg svg-files ui ui-components
Last synced: 4 months ago
JSON representation
📦 This package provides the Simple Icons packaged as a set of React components.
- Host: GitHub
- URL: https://github.com/icons-pack/react-simple-icons
- Owner: icons-pack
- License: mit
- Created: 2019-08-03T21:54:26.000Z (almost 7 years ago)
- Default Branch: main
- Last Pushed: 2025-04-13T04:31:38.000Z (about 1 year ago)
- Last Synced: 2025-04-13T05:26:39.762Z (about 1 year ago)
- Topics: brands, codea, components, desing, icons, icons-pack, iconset, logo, react, react-simple-icons, simple-icons, svg, svg-files, ui, ui-components
- Language: TypeScript
- Homepage:
- Size: 13.6 MB
- Stars: 372
- Watchers: 2
- Forks: 19
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# react-simple-icons
This package provides the [Simple Icons 16.8.0](https://github.com/simple-icons/simple-icons/releases/tag/16.8.0)
packaged as a set of [React](https://facebook.github.io/react/) components.
[](https://www.npmjs.com/package/@icons-pack/react-simple-icons)
[](https://www.npmjs.com/package/@icons-pack/react-simple-icons)
[](https://github.com/icons-pack/react-simple-icons/blob/main/LICENSE)
## Installation
Install the package in your project directory with:
```shell
npm add @icons-pack/react-simple-icons
```
## Usage
You can use [simpleicons.org](https://simpleicons.org) to find a specific icon. When importing an icon, keep in mind
that the names of the icons are [upperCamelCase](https://github.com/samverschueren/uppercamelcase) , for instance:
- [`Material Design`](https://simpleicons.org/?q=material) is exposed as
`{ SiMaterialdesign } from @icons-pack/react-simple-icons`
- [`azure devOps`](https://simpleicons.org/?q=azure%20devOps) is exposed as
`{ SiAzuredevops } from @icons-pack/react-simple-icons`
## Basic example
```jsx
import { SiReact } from '@icons-pack/react-simple-icons';
function BasicExample() {
return ;
}
```
## Change title
`@icons-pack/react-simple-icons` provides a default title referring to the component name
> The `` element provides an accessible, short-text description of any SVG container element or graphics element.
```jsx
import { SiReact } from '@icons-pack/react-simple-icons';
// title default "React"
function ChangeTitle() {
return ;
}
```
## Use default color
Set color as `default` to use the default color for each icon
```jsx
import { SiReact } from '@icons-pack/react-simple-icons';
function DefaultColorExample() {
return ;
}
```
### Use default color as hex
Append `Hex` to the icon name to use the default color as hex string
```jsx
import { SiReact, SiReactHex } from '@icons-pack/react-simple-icons';
function DefaultColorExample() {
return ;
}
```
## Custom styles
```jsx
import { SiReact } from '@icons-pack/react-simple-icons';
function CustomStyles() {
return ;
}
```
```css
.myStyle {
width: 35px;
height: 35px;
}
```