coreui / coreui-icons

CoreUI Free Icons - Premium designed free icon set with marks in SVG, Webfont and raster formats

CoreUI

Open Source UI Components Library built on top of Bootstrap 5.
Explore CoreUI docs »

Report bug · Request feature · Blog

Table of contents

• Table of contents
• Quick start
• Status
• What's included
• Bugs and feature requests
• Documentation
• Frameworks
• Templates
• Contributing
• Community
• Versioning
• Creators
• Thanks
• Support CoreUI Development
• Copyright and license

Quick start

Several quick start options are available:

• Download the latest release
• Clone the repo: git clone https://github.com/coreui/coreui.git
• Install with npm: npm install @coreui/coreui
• Install with yarn: yarn add @coreui/coreui
• Install with Composer: composer require coreui/coreui:5.0.0

Read the Getting started page for information on the framework contents, templates and examples, and more.

Status

What's included

Within the download you'll find the following directories and files, logically grouping common assets and providing both compiled and minified variations. You'll see something like this:

coreui/
├── css/
│   ├── coreui-grid.css
│   ├── coreui-grid.css.map
│   ├── coreui-grid.min.css
│   ├── coreui-grid.min.css.map
│   ├── coreui-grid.rtl.css
│   ├── coreui-grid.rtl.css.map
│   ├── coreui-grid.rtl.min.css
│   ├── coreui-grid.rtl.min.css.map
│   ├── coreui-reboot.css
│   ├── coreui-reboot.css.map
│   ├── coreui-reboot.min.css
│   ├── coreui-reboot.min.css.map
│   ├── coreui-reboot.rtl.css
│   ├── coreui-reboot.rtl.css.map
│   ├── coreui-reboot.rtl.min.css
│   ├── coreui-reboot.rtl.min.css.map
│   ├── coreui-utilities.css
│   ├── coreui-utilities.css.map
│   ├── coreui-utilities.min.css
│   ├── coreui-utilities.min.css.map
│   ├── coreui-utilities.rtl.css
│   ├── coreui-utilities.rtl.css.map
│   ├── coreui-utilities.rtl.min.css
│   ├── coreui-utilities.rtl.min.css.map
│   ├── coreui.css
│   ├── coreui.css.map
│   ├── coreui.min.css
│   ├── coreui.min.css.map
│   ├── coreui.rtl.css
│   ├── coreui.rtl.css.map
│   ├── coreui.rtl.min.css
│   └── coreui.rtl.min.css.map
└── js/
    ├── coreui.bundle.js
    ├── coreui.bundle.js.map
    ├── coreui.bundle.min.js
    ├── coreui.bundle.min.js.map
    ├── coreui.esm.js
    ├── coreui.esm.js.map
    ├── coreui.esm.min.js
    ├── coreui.esm.min.js.map
    ├── coreui.js
    ├── coreui.js.map
    ├── coreui.min.js
    └── coreui.min.js.map

We provide compiled CSS and JS (coreui.*), as well as compiled and minified CSS and JS (coreui.min.*). source maps (coreui.*.map) are available for use with certain browsers' developer tools. Bundled JS files (coreui.bundle.js and minified coreui.bundle.min.js) include Popper.

Bugs and feature requests

Have a bug or a feature request? Please first read the issue guidelines and search for existing and closed issues. If your problem or idea is not addressed yet, please open a new issue.

Documentation

The documentation for the CoreUI & CoreUI PRO is hosted at our website CoreUI

Running documentation locally

1. Run npm install to install the Node.js dependencies, including Hugo (the site builder).
2. Run npm run test (or a specific npm script) to rebuild distributed CSS and JavaScript files, as well as our docs assets.
3. From the root /coreui directory, run npm run docs-serve in the command line.
4. Open http://localhost:9001/ in your browser, and voilà.

Learn more about using Hugo by reading its documentation.

Frameworks

CoreUI supports most popular frameworks.

• CoreUI for Angular
• CoreUI for Bootstrap (Vanilla JS)
• CoreUI for React
• CoreUI for Vue

Templates

Fully featured, out-of-the-box, templates for your application based on CoreUI.

• Angular Admin Template
• Bootstrap Admin Template
• React Admin Template
• Vue Admin Template

Contributing

Please read through our contributing guidelines. Included are directions for opening issues, coding standards, and notes on development.

Editor preferences are available in the editor config for easy use in common text editors. Read more and download plugins at https://editorconfig.org/.

Community

Stay up to date on the development of CoreUI and reach out to the community with these helpful resources.

• Read and subscribe to The Official CoreUI Blog.
• Follow @core_ui on Twitter.

Versioning

For transparency into our release cycle and in striving to maintain backward compatibility, CoreUI is maintained under the Semantic Versioning guidelines.

See the Releases section of our project for changelogs for each release version.

Creators

Łukasz Holeczek

• https://twitter.com/lukaszholeczek
• https://github.com/mrholek

Andrzej Kopański

• https://github.com/xidedix

CoreUI Team

• https://twitter.com/core_ui
• https://github.com/coreui
• https://github.com/orgs/coreui/people

Thanks

CoreUI is designed as the extension of Bootstrap. Special thanks for Bootstrap team and Bootstrap's contributors.

Support CoreUI Development

CoreUI is an MIT-licensed open source project and is completely free to use. However, the amount of effort needed to maintain and develop new features for the project is not sustainable without proper financial backing. You can support development by buying the CoreUI PRO or by becoming a sponsor via Open Collective.

Copyright and license

Copyright 2024 creativeLabs Łukasz Holeczek. Code released under the MIT License. Docs released under Creative Commons.

coreui-icons's Issues

Googe pay icon

The Google Pay icon seems to have changed. Would love to see a new icon if you take these sorts of requests here.

Should font paths be relative to package?

Description:
I recently pulled coreui and coreui icons to a Laravel setup and when attempting to run npm build, NPM was not able to trace the .eot file to the right location because it was using ../ as seen in:

coreui-icons/scss/free/_variables.scss

Line 2 in b9bb76b

$coreui-icons-font-path: "../fonts" !default;

Experiment:
I tested replacing ../ with ~@coreui/icons/ and this did the trick. NPM was able to build the proper files and I'm now able to load the icons in the page.

Could/Should this be corrected in font related files or should I be working with these packages differently? 🧐

Thanks,

Everything is broken!

Hi, the descriptions / names of the icons are all wrong in documentation. Also I have the last version (1.0.1), and I've been trying a lot of free icons and no one works....

Include path for SVG files in Flag icons is incorrect

This is similar to #20 but for the Flag icons.

The path defined here: https://github.com/coreui/coreui-icons/blob/master/scss/flag/_core.scss#L14 isn't quite right because the svg folder is actually one level deeper. This error was emitted when transpiling the SCSS:

Syntax Error: ModuleNotFoundError: Module not found: Error: Can't resolve '../svg/flag/cif-ad.svg' in '/project/node_modules/@coreui/icons/scss/flag'

To fix this, I changed this line:

background-image: url(../svg/flag/#{$coreui-icons-prefix}#{$icon}.svg);

to

background-image: url(../../svg/flag/#{$coreui-icons-prefix}#{$icon}.svg);

Flag variable names are uppercase, but SVG files are lowercase

As the title describes, the variables in the SCSS for the flag icons are in uppercase:

https://github.com/coreui/coreui-icons/blob/master/scss/flag/_variables.scss#L3

But the SVG files are in lowercase:

https://github.com/coreui/coreui-icons/tree/master/svg/flag

This results in this error when trying to transpile the SCSS to CSS:

Syntax Error: ModuleNotFoundError: Module not found: Error: Can't resolve '../svg/flag/cif-AD.svg' in '/project/node_modules/@coreui/icons/scss/flag'

Changing the variables to lowercase fixed this for me.

Demo icon page for vue error for icon cil-x-circle (3.1.0)

On icon demo page for vue for 3.1.0 version, there is an error with icon 'CilXCircle' - correct name should be 'cil-x-circle' not 'cil-xcircle'

Dist contains git merge conflicts

When I installed coreui-free-bootstrap-admin-template on branch v3-next and ran npm run build the free.min.css file inside the resulting dist/vendors/@coreui/icons/css/ folder contains git merge conflicts:

@charset "UTF-8";/*!
<<<<<<< HEAD:scss/free.scss
 * CoreUI Icons Free - Open Source Icons
 * @version v0.4.1
=======
 * CoreUI Icons Free Open Source Icons
 * @version v1.0.0-beta.3
>>>>>>> v1-next:scss/free/free-icons.scss
 * @link https://coreui.io/icons
 * Copyright (c) 2019 creativeLabs Łukasz Holeczek
 * Licensed under MIT (https://coreui.io/icons/license)
 */@font-face{font-family:CoreUI-Icons-Free;src:url(../

How to use icons in freeSet in r2.0.1

I have installed coreui/icons r2.0.1 via npm, and in src/index.js:
React.icons = icons

While, I try to use cli-cart as follow:
<CIcon content="cil-cart" />

The console log tells me:
CIcon component: icon name 'cil-cart' does not exist in React.icons object. To use icons by name prop you need to make them available globally by adding them to React.icons object. CIcon component docs: https://coreui.io/react/docs/components/CIcon

I follow the steps in:
coreui/coreui-react#177
https://stackoverflow.com/questions/62840344/coreui-icon-doesnt-appear-in-my-react-js-app

But it doesn't show any icons? Do I miss something?

Thanks.

Please could svelte lib be linked in readme>

Could you please link this repo in your readme too

svelte-coreui-icons

Thank you and I was wondering some icons I can't find in your repo that exist on the official website?

eg: chart-area

I suppose they were added later?

TrainerRoad have changed their logo

Here is a possible SVG to replace current logo with

https://www.trainerroad.com/static/favicons/safari-pinned-tab.svg

Same size for all flags

All the flags are currently different sizes. It would be nice if they were all the same size.

Create SCSS variable for SVG path

Now there is a variable for $coreui-icons-font-path, but not for the SVG path. Current SVG path is set to ../svg which I would like to change.

Vuejs icons not supported with Vuejs v3 + Typescript

Vuejs icons not supported with Vuejs v3 + Typescript

Default icon path to icon files in SCSS is wrong (Free icons)

Ran into this yesterday when trying to build these icons. The SASS transpilation step fails because the path defined for the Icon files here: https://github.com/coreui/coreui-icons/blob/master/scss/free/_variables.scss#L2 is incorrect. The fonts folder is actually one more level back, so this:

$coreui-icons-font-path: "../fonts" !default;

should be

$coreui-icons-font-path: "../../fonts" !default;

Here's the error I was receiving:

Syntax Error: ModuleNotFoundError: Module not found: Error: Can't resolve '../fonts/CoreUI-Icons-Free.eot' in '/project/node_modules/@coreui/icons/scss/free'

Weird circle over brazilian flag

There is a weird half circle over the brazil flag.

<CIcon class=name="'cif-' + entry.country.countryShort.toLowerCase()"/>

I'm using Vue.JS with coreui-pro vue 3.0 beta-1 and coreui/icons 1.0.0

Done payment 2 month ago. When should I get the 2000 icons pack?

Done payment 2 month ago. When should I get the 2000 icons pack?

All 902 Icons (Over 2.000 will be available soon)

Payment is for 2000 icons, not for the 902 icons.

Some icons are not working

It seams that there a some icons that are not displayed, e.g. "cui-dashboard", "cui-chalkboard", " cui-accessible" etc..
The Plus Icon for example doesn´t work with "cui-plus" but with "icon-plus" instead. How should i know wich prefix should be used ?

PNGs no longer present

I had been using your icons in a prototype, and decided to see if there were any new ones. Apparently there are, but they’re no longer in handy PNG form. This means I can’t browse through the icons with Finder (since there’s no Quick Look for SVG).

Can you restore the PNGs?

(It might also be useful to show a version number somewhere, I am not spotting one. My download has PNGs with a date stamp of 27 Jan 2020. Today’s download has SVGs with a date stamp of 6 July 2020.)

the Algerian (DZ) flag is inaccurate.

This is what we have https://github.com/coreui/coreui-icons/blob/main/svg/flag/cif-dz.svg

and this is how it should look like

Update React Version to 18+

Build is failing in React 18 because of older version of React in this repository

npm ERR! While resolving: @coreui/[email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"~18.2.0" from the root project
npm ERR!   peer react@">=17" from @coreui/[email protected]
npm ERR!   node_modules/@coreui/react
npm ERR!     @coreui/react@"^4.2.3" from the root project
npm ERR!   18 more (@coreui/react-pro, @emotion/react, ...)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^[17](https://github.com/Trademanza/Trademanza-Admin-KYC/runs/7055269253?check_suite_focus=true#step:3:18)" from @coreui/[email protected]
npm ERR! node_modules/@coreui/icons-react
npm ERR!   @coreui/icons-react@"^2.0.1" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: [email protected]
npm ERR! node_modules/react
npm ERR!   peer react@"^17" from @coreui/[email protected]
npm ERR!   node_modules/@coreui/icons-react
npm ERR!     @coreui/icons-react@"^2.0.1" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /home/runner/.npm/eresolve-report.txt for a full report.

How to use coreui icons pro with coreui react admin template?

Hello,

I purchased CoreUI React Admin Template and then CoreUI Icons Pro package. Since then I was never able to get the Pro Icons to work the way it works like the Free Icons (using the element).

Is there a documentation that I can use? Obviously there is a missing here. You should have a support forum, or documentation on how to use the package.

Please add a flag for Hong Kong

Please add a flag for Hong Kong , thx

[cil-delete] Cannot find delete icon in free set

According to this the delete icon is a free icon. But I cannot find cil-delete in the free directory.

(the same goes for cil-backspace)

please add as simple 'check' icon

Please add as simple 'check' icon, similar in style with current plus / x icons.
There's only a double-lined check icon now.

Thanks :)

please add support for animating icons

Please add support for animating icons by adding a class to current c-icon cui-x icon, similar to
https://fontawesome.com/how-to-use/on-the-web/styling/animating-icons

Icons list shows the wrong description

The icons list at coreui icons shows the wrong description/name after the icon for "Bowling".

Starting from '3D' until 'Bowling' all icons have the right description but after 'Bowling' every icon seems to have shifted the description to the next items.

Missing country flags

Flag icons set does not contain all country flags, for example Cook Islands flag and British Virgin Islands flag are missing.

[suggestion] Provide coverage for more Simple Line Icons in free version

In the upgrade from CoreUI 2 to CoreUI 3, the recommendation is to stop using FontAwesome, and Simple Line Icons, and to start using CoreUI icons.

This is great however it comes at a cost: You lose access to a significant amount of icons.

It would be a great contribution to your dedication to open source if the free set of CoreUI icons included replacements for more of the icons that were provided by Simple Line Icons.

Given the Simple Line Icons contains <180 icons, and most of the ones missing from the free version do exist in the pro version of CoreUI icons, this would largely be a judgement call and business decision on your end that I hope you can consider.

Some of the ones that would be valuable replacements for Simple Line Icons to include in the free version:

• https://coreui.io/icons/linear/check-circle/
• https://coreui.io/icons/linear/plus-circle/
• https://coreui.io/icons/linear/minus-circle/
• https://coreui.io/icons/linear/exclamation-circle/
• https://coreui.io/icons/linear/chevron-left-alt/
• https://coreui.io/icons/linear/chevron-right-alt/
• https://coreui.io/icons/linear/chevron-bottom-alt/
• https://coreui.io/icons/linear/chevron-top-alt/
• https://coreui.io/icons/linear/key-alt/
• https://coreui.io/icons/linear/eye/
• https://coreui.io/icons/linear/shield-x/
• https://coreui.io/icons/linear/check-alt/ (Issue #6)
• https://coreui.io/icons/linear/check-circle/
• Help, Question mark, Question mark circle (Issue #5)
• Info circle.
• Rocket
• https://coreui.io/icons/linear/globe/
• https://coreui.io/icons/linear/signpost/

Thanks!

please add a help/question icon

Please add a help/question icon in the free version, to be used for support/help. It's quite common in apps.

Thanks!

NPM can't find coreui icons

I'm trying to install coreui icons through npm install and everytime I got this error:

npm ERR! code E404
npm ERR! 404 Not Found: @coreui/icons@^0.2.0

And I get the same error trying to install with npm install @coreui/icons --save

Here's the log:

2900 verbose stack Error: 404 Not Found: @coreui/icons@^0.2.0
2900 verbose stack     at fetch.then.res (/home/yuri/.nvm/versions/node/v10.2.1/lib/node_modules/npm/node_modules/pacote/lib/fetchers/registry/fetch.js:42:19)
2900 verbose stack     at tryCatcher (/home/yuri/.nvm/versions/node/v10.2.1/lib/node_modules/npm/node_modules/bluebird/js/release/util.js:16:23)
2900 verbose stack     at Promise._settlePromiseFromHandler (/home/yuri/.nvm/versions/node/v10.2.1/lib/node_modules/npm/node_modules/bluebird/js/release/promise.js:512:31)
2900 verbose stack     at Promise._settlePromise (/home/yuri/.nvm/versions/node/v10.2.1/lib/node_modules/npm/node_modules/bluebird/js/release/promise.js:569:18)
2900 verbose stack     at Promise._settlePromise0 (/home/yuri/.nvm/versions/node/v10.2.1/lib/node_modules/npm/node_modules/bluebird/js/release/promise.js:614:10)
2900 verbose stack     at Promise._settlePromises (/home/yuri/.nvm/versions/node/v10.2.1/lib/node_modules/npm/node_modules/bluebird/js/release/promise.js:693:18)
2900 verbose stack     at Async._drainQueue (/home/yuri/.nvm/versions/node/v10.2.1/lib/node_modules/npm/node_modules/bluebird/js/release/async.js:133:16)
2900 verbose stack     at Async._drainQueues (/home/yuri/.nvm/versions/node/v10.2.1/lib/node_modules/npm/node_modules/bluebird/js/release/async.js:143:10)
2900 verbose stack     at Immediate.Async.drainQueues [as _onImmediate] (/home/yuri/.nvm/versions/node/v10.2.1/lib/node_modules/npm/node_modules/bluebird/js/release/async.js:17:14)
2900 verbose stack     at runCallback (timers.js:696:18)
2900 verbose stack     at tryOnImmediate (timers.js:667:5)
2900 verbose stack     at processImmediate (timers.js:649:5)
2901 verbose cwd /home/yuri/repos/cp-frontend2
2902 verbose Linux 4.14.57-1-MANJARO
2903 verbose argv "/home/yuri/.nvm/versions/node/v10.2.1/bin/node" "/home/yuri/.nvm/versions/node/v10.2.1/bin/npm" "install"
2904 verbose node v10.2.1
2905 verbose npm  v6.2.0
2906 error code E404
2907 error 404 Not Found: @coreui/icons@^0.2.0
2908 verbose exit [ 1, true ]

My environment:
Manjaro: GNOME 17.1.11
Node: 10.2.1
NVM: 0.33.11

How to use CoreUI Icons Pro with CoreUI Vue Admin template?

Hello,

I purchased CoreUI Admin Template (all frameworks) and then CoreUI Icons Pro package. Since then I was never able to get the Pro Icons work the way it work like the Free Icons (using the element).

Is there a documentation that I can use? Obviously there is a missing here. You should have a support forum, or documentation how to use the package.

CoreUI icons package is huge!

How can I reduce the bundle size of the icons package?

Currently, the size is 10.2MB

I’m just importing these ones:

//icons.js    
import {
      cilEnvelopeClosed,
      cilEnvelopeOpen,
      cilMagnifyingGlass,
      cilMoon,
      cilSpeedometer,
      cilSun,
      cilAccountLogout,
      cilUser,
      cilXCircle,
      cilX,
    } from '@coreui/icons'

import { logo } from './logo'

export const iconsSet = Object.assign({}, { logo }, {
  cilEnvelopeClosed,
  cilEnvelopeOpen,
  cilMagnifyingGlass,
  cilMoon,
  cilSpeedometer,
  cilSun,
  cilAccountLogout,
  cilUser,
  cilXCircle,
  cilX,
})

//main.js
import { iconsSet as icons } from './assets/icons/icons.js'
...
...
...
new Vue({
  el: '#app',
  router,
  store,
  icons
  components: {
    App
  },
  template: '<App/>',
  apolloProvider: createProvider(),
})

can't use icons

I download coreui-free-vue-admin-template and want use whole icon from 'coreui-icons'
my code is:
in main.js
import { freeSet, brandSet, flagSet } from '@coreui/icons'
new Vue({ el: '#app', router, store, icons: { freeSet, brandSet, flagSet }, template: '<App/>', components: { App, }, })
in vue file
<CIcon name="cil-pregnant" />
but it not work it,

Add license to NPM distribution

The license file is not being distributed with the NPM package

Can't see cil-sad in free icons

I can't find cil-sad in the repo free-icons, is this belong in this repo or is the PRO one.

Microsoft Teams Icon

Not sure if this is the right place for requests...but would it possible to add the Microsoft Teams Icon?
Many thanks and keep up the good work!

Most of icons are not working with Vuejs

Below is a part of package.json

  "dependencies": {
    "@coreui/coreui": "^3.2.0",
    "@coreui/icons": "^2.0.0-beta.5",
    "@coreui/utils": "^1.3.1",
    "@coreui/vue": "^3.1.1",
    "@coreui/vue-chartjs": "^1.0.5",
    "@webplayer/coreplayer": "^0.2.3",
    "axios": "^0.19.2",
    "core-js": "^3.6.5",
    "vue": "^2.6.11",
    "vue-advanced-cropper": "^0.17.3",
    "vue-router": "^3.2.0",
    "vuex": "^3.4.0",
    "vuex-persistedstate": "^3.0.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.4.0",
    "@vue/cli-plugin-eslint": "~4.4.0",
    "@vue/cli-plugin-router": "~4.4.0",
    "@vue/cli-plugin-vuex": "~4.4.0",
    "@vue/cli-service": "~4.4.0",
    "@vue/eslint-config-prettier": "^6.0.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^5.16.0",
    "eslint-plugin-prettier": "^3.1.3",
    "eslint-plugin-vue": "^6.2.2",
    "prettier": "^1.19.1",
    "vue-template-compiler": "^2.6.11",
    "node-sass": "~4.14.1",
    "sass-loader": "~8.0.2"
  }

and the problem is that most of icons with cil-, ,cis-.. are not working.

It even doesn't work in Coreui admin template.

For example,

{
        _name: 'CSidebarItem',
        name: '**************',
        to: '/',
        icon: 'cil-clock',
      },

If I use cil-clock nothing shows up.

Icon Request: Crowdin

Using the Crowdin Logo

unable to load CSS style images when deploy angular coreui in off root Nginx

I deployed my coreui angular app in ngnix as off root deployment. When i launch the App URL, I see few images ( rendered from CSS classes as shown below) not rendering in the UI.

CSS Class to render image:
.icon-speech {
content: "\e02c" !important;
}

Ngnix config file:

server {
#-------

location /rig-activity {

    set $url http://edge_rig-activity-service;
                rewrite ^/rig-activity(.*) $1 break;
                proxy_pass $url;
        }

        location /rig-activity-ui/ {
            #enable for debug mode
            #proxy_pass http://localhost:4200;


            #root /www/html;
            alias /www/rig-activity-ui/;

            #index  index.html index.htm;

            try_files $uri$args $uri$args/ $uri/ /rig-activity-ui/index.html;
        }

}