108 lines
3.5 KiB
Markdown
108 lines
3.5 KiB
Markdown
# Unicons
|
|
|
|
1000+ Pixel-perfect vector icons and Iconfont for your next project. These icons are designed by [Iconscout](https://iconscout.com).
|
|
|
|
## Getting Started
|
|
|
|
### Using as a font
|
|
|
|
It's easy to use Unicons on your website by just inserting following css. You can also download this repo and use the css from `css` folder.
|
|
|
|
```html
|
|
<link
|
|
rel="stylesheet"
|
|
href="https://unicons.iconscout.com/release/v4.0.0/css/unicons.css"
|
|
/>
|
|
```
|
|
|
|
And use the icons in your `body` as below.
|
|
|
|
```html
|
|
<i class="uil uil-comments"></i>
|
|
```
|
|
|
|
### Using as npm package
|
|
|
|
You can easily install [Unicons](https://iconscout.com/unicons) using npm.
|
|
|
|
```bash
|
|
npm install --save @iconscout/unicons
|
|
```
|
|
|
|
### Using as an SVG
|
|
|
|
If you're a designer then it's always great to have SVG files. You can download SVGs from [Official Unicons Website](https://iconscout.com/unicons) or [download Icondrop](https://iconscout.com/icondrop) to access these icons right into Sketch, Adobe Xd, Adobe Illustrator, and many more.
|
|
|
|
### Using in Flutter Framework
|
|
|
|
There's a Flutter package created by [Pedro Lemos](https://github.com/pedrolemoz), avaliable in [pub.dev](https://pub.dev/packages/unicons), which can be easily used in your project.
|
|
|
|
Just add the dependency in your `pubspec.yaml` file as following:
|
|
|
|
```yaml
|
|
dependencies:
|
|
unicons: ^1.0.0+2
|
|
```
|
|
|
|
Then, run the command above:
|
|
|
|
```bash
|
|
flutter pub get
|
|
```
|
|
|
|
Alternatively, your editor might support `flutter pub get`. Check the docs for your editor to learn more.
|
|
|
|
Now, in your Dart code, import the package:
|
|
|
|
```dart
|
|
import 'package:unicons/unicons.dart';
|
|
```
|
|
|
|
### Use with JS Frameworks
|
|
|
|
We've created components for popular libraries like React, VueJS, React Native. You can head over to official GitHub Repo to know more.
|
|
|
|
#### Line Style
|
|
|
|
- For React: https://github.com/Iconscout/react-unicons
|
|
- For VueJS: https://github.com/Iconscout/vue-unicons
|
|
- For React Native: https://github.com/Iconscout/react-native-unicons
|
|
|
|
#### Solid Style
|
|
|
|
- For React: https://github.com/Iconscout/react-unicons-solid
|
|
- For VueJS: https://github.com/Iconscout/vue-unicons-solid
|
|
|
|
#### Monochrome Style
|
|
|
|
- For React: https://github.com/Iconscout/react-unicons-monochrome
|
|
|
|
### More ways (Community supported)
|
|
|
|
- [Vue-unicons](https://github.com/antonreshetov/vue-unicons) by [Anton Reshetov](https://github.com/antonreshetov)
|
|
|
|
## Roadmap
|
|
|
|
- [x] Make React Components
|
|
- [x] Adding Brand Icons
|
|
- [x] Designing Solid Style
|
|
- [ ] Designing Thin-line Style
|
|
- [ ] Support for CSS Animations
|
|
- [ ] Make SVG Sprite in which user can control different attributes such as stroke, fill, width, height and more.
|
|
|
|
## Contributing
|
|
|
|
We will be happy to have community support for Unicons. Feel free to fork and create pull requests. We have given a small roadmap above so that you can help us build these features.
|
|
|
|
### Icon Requests
|
|
|
|
We've created a thread at [Iconscout Community](https://discuss.iconscout.com/new-topic?title=Icon%20Request:%20%3Cicon%3E&body=Hey%20there,%20%3Cicon%3E%20will%20be%20great%20fit%20for%20Unicons.%20I%20would%20love%20to%20use%20it!&category=Unicons&tags=requests) where you can request for new icons. And we'll be happy to design them in upcoming weeks.
|
|
|
|
## License
|
|
|
|
Unicons are Open Source icons and licensed under [Apache 2.0](https://www.apache.org/licenses/LICENSE-2.0.txt). You're free to use these icons in your personal and commercial project. We would love to see the attribution in your app's **about** screen, but it's not mandatory.
|
|
|
|
```html
|
|
Unicons by <a href="https://iconscout.com/">Iconscout</a>
|
|
```
|