# react-icons-picker > A React icon picker for react-icons icons, with a picker component and an icon renderer. No CSS loader required. Latest version **1.1.0** (published 2026-07-02) · MIT license · 0 weekly downloads ## Install ```sh npm install react-icons-picker pnpm add react-icons-picker yarn add react-icons-picker bun add react-icons-picker ``` ## Health **Score 60/100 (C)** — status: active. Positive: has types; esm support; no vulnerabilities; high quality score. Warnings: low downloads. ## Facts | | | |---|---| | Version | 1.1.0 | | Published | 2026-07-02 | | First published | 2022-10-07 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 0 | | Unpacked size | 54.3 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 0 | | Author | Nyambayar Saintogtokh | | Maintainers | nyambayar | | Keywords | react, react-icons, icon, icon-picker, picker, component | ## Links - npm: https://www.npmjs.com/package/react-icons-picker - Repository: https://github.com/NyambayarSaint/react-icons-picker - Homepage: https://github.com/NyambayarSaint/react-icons-picker#readme - Issues: https://github.com/NyambayarSaint/react-icons-picker/issues - npm.io page: https://npm.io/package/react-icons-picker ## Alternatives - [@fortawesome/react-fontawesome](https://npm.io/package/@fortawesome/react-fontawesome.md) — 2.2M weekly downloads - [roboto-fontface](https://npm.io/package/roboto-fontface.md) — 196.0K weekly downloads - [@react-native-vector-icons/common](https://npm.io/package/@react-native-vector-icons/common.md) — 150.4K weekly downloads - [@procore/core-icons](https://npm.io/package/@procore/core-icons.md) — 4.6K weekly downloads - [@react-md/material-icons](https://npm.io/package/@react-md/material-icons.md) — 1.6K weekly downloads ## Recent versions - 1.1.0 (latest) — 2026-07-02 - 1.0.9 — 2022-10-10 - 1.0.8 — 2022-10-10 - 1.0.7 — 2022-10-10 - 1.0.6 — 2022-10-10 - 1.0.5 — 2022-10-10 - 1.0.4 — 2022-10-10 - 1.0.3 — 2022-10-10 - 1.0.2 — 2022-10-10 - 1.0.1 — 2022-10-07 ## README # React-Icons Icon Picker ## Overview react-icons-picker is a React icon picker for react-icons icons. It contains both a picker component and an icon renderer. Doesn't need any css loader. Ships with TypeScript definitions out of the box. [Sandbox Demo](https://codesandbox.io/s/ecstatic-bose-v4mhi9). ![Icon Picker Demo](assets/react-icons-picker.gif) ## Installation Install via npm ```cli npm install react-icons-picker ``` or yarn ```cli yarn add react-icons-picker ``` ## Usage The IconPicker component is just like any other picker component. The value prop is the icon that is displayed on the picker. When a new icon is selected, the onChange handler is fired. You can customize the look and feel as you want by passing props or just selecting the css class. ```react import * as React from 'react' import IconPicker from 'react-icons-picker' export default () => { const [value, setValue] = React.useState("FaUsers") return ( setValue(v)} /> ) } ``` You can also use the IconPickerItem component to render the icon. This uses react-icons under the hood. ```react import * as React from 'react' import { IconPickerItem } from 'react-icons-picker' export default () => ( ) ``` ## All valid configurations/props of the package IconPicker | Prop | Type | Required | Description | | ----------------------- | ------------------- | -------- | -------------------------------------------------------------- | | value | string | true | The current font awesome icon displayed on the picker. | | onChange | (v: string) => void | true | A change handler that is executed when a new icon is selected. | | modalEmptyContent | React element | false | React component that gets displayed when search result is empty| | searchInputPlaceholder | string | false | The placeholder text for search input | | pickButtonStyle | CSSProperties | false | Styles for the picker button | | pickButtonFocusStyle | CSSProperties | false | Styles for the picker button focus | | modalFadeStyle | CSSProperties | false | Styles for the modal window's background fade effect | | modalWrapperStyle | CSSProperties | false | Styles for the modal window's centered wrapper div | | searchBarStyle | CSSProperties | false | Styles for the search input's wrapper div element | | searchInputStyle | CSSProperties | false | Styles for the search input | | searchInputFocusStyle | CSSProperties | false | Styles for the search input's focus | | modalContentWrapperStyle| CSSProperties | false | Styles for the modal window's content wrapper div | | modalIconsWrapperStyle | CSSProperties | false | Styles for the wrapper element of search result of icons | | modalIconsStyle | CSSProperties | false | Styles for the each instance of search result of icons | | modalIconNameStyle | CSSProperties | false | Styles for the each instance of search result of icon names | | modalIconsHoverStyle | CSSProperties | false | Styles for the hovering effect of each search result icons | | modalEmptyWrapperStyle | CSSProperties | false | Styles for the wrapper element of empty search result container| IconPickerItem | Prop | Type | Required | Description | | ---- | --- | --- | --- | value | string | true | The name of the icon to render. Example: "FaUsers" | | size | number | false |The size of the icon. Default: 24 | | color | string | false | The color of the icon. Default: "#000" | ## Changelog ### 1.1.0 - **Fix:** the `Si` (Simple Icons) pack now renders Simple Icons. In previous versions it mistakenly loaded Material Design (`Md`) icons, so any `Si*` icon either failed to render or showed the wrong glyph. - **Added:** bundled TypeScript type definitions (`index.d.ts`). - Restored build tooling and repository metadata. ## Contribution Guide If you are interested in contributing, please submit a PR. ### Contributors - [Nyambayar Saintogtokh](https://github.com/NyambayarSaint) --- _Source: https://npm.io/package/react-icons-picker · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._