{"id":17269935,"url":"https://github.com/viglino/iconicss","last_synced_at":"2025-08-19T11:32:25.875Z","repository":{"id":57270953,"uuid":"108731426","full_name":"Viglino/iconicss","owner":"Viglino","description":"More than 900 pure CSS3 icons!","archived":false,"fork":false,"pushed_at":"2021-02-09T08:55:43.000Z","size":3760,"stargazers_count":119,"open_issues_count":0,"forks_count":13,"subscribers_count":6,"default_branch":"master","last_synced_at":"2024-12-09T16:45:23.402Z","etag":null,"topics":["css","css3","icon-set","pure-css","purecss"],"latest_commit_sha":null,"homepage":"http://viglino.github.io/iconicss/","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Viglino.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-10-29T12:15:02.000Z","updated_at":"2024-07-27T20:17:51.000Z","dependencies_parsed_at":"2022-09-06T21:52:42.792Z","dependency_job_id":null,"html_url":"https://github.com/Viglino/iconicss","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Viglino%2Ficonicss","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Viglino%2Ficonicss/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Viglino%2Ficonicss/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Viglino%2Ficonicss/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Viglino","download_url":"https://codeload.github.com/Viglino/iconicss/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":230351169,"owners_count":18212788,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","css3","icon-set","pure-css","purecss"],"created_at":"2024-10-15T08:18:03.274Z","updated_at":"2024-12-18T23:07:32.861Z","avatar_url":"https://github.com/Viglino.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# iConicss\n\n\u003cimg src=\"https://raw.githubusercontent.com/github/explore/6c6508f34230f0ac0d49e847a326429eefbfc030/topics/css/css.png\" width=\"75\" align=\"left\" /\u003e\n\n### More than 900 pure CSS3 icons!\n[Look at the demo page!](http://viglino.github.io/iconicss/)\n\nEach icon uses a single anchor element (one div) and just one color: the `currentColor` (and transparent) except for the colored icons (as the name suggests). Thus they can easily be included in a page with a single HTML element and use the current color and current font size.\n\n## Why use iConicss?\n\n* Because CSS3 is now widely suported by all main browsers.\n* Because it may result in cool transition and morphing effects when changing icons.\n* Because it's fun! Like building a Lego:registered: model with a limited set of bricks.\n\n## Known limitation\n* Some side effects may result in some browsers\n* IE doesn't compute properly the `currentColor` keyword in the CSS `linear-gradient()` \n([it's a known bug since 2014!](https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/1328019/)).\nThis will impact icons that use gradient background-image (just a few ones).\n\n## How to use it?\n\nInstall iConicss using `npm install iconicss` or download [iconicss.min.css](https://rawgit.com/Viglino/iconicss/master/dist/iconicss.min.css) then add it in your html page:\n````html\n\u003clink rel=\"stylesheet\" href=\"iconicss.min.css\"\u003e\n````\nUsing npm you can `import 'iconicss/dist/iconicss.min.css'` or individual files such as `import 'iconicss/css/github.css'` but you'll have to `import 'iconics iconicss/icss.css` before.\n\nThen just add `icss-` classes to an `\u003ci\u003e` elements to add a new icon on your page:\n````html\n\u003ci class=\"icss-home\"\u003e\u003c/i\u003e\n````\n\nYou can change color of icons as simple as set `color` in CSS.\n````html\n\u003ci class=\"icss-home\" style=\"color:red;\"\u003e\u003c/i\u003e\n````\nYou can change the size of the icon just by changing the `font-size` in CSS\n  \nTo animate the icon when changing just add the `icss-anim` class to the element.\n````html\n\u003ci class=\"icss-anim icss-home\"\u003e\u003c/i\u003e\n````\nThen just change the `icss-home` class to `icss-github` to let the transition play.\n\n## Developpement\n\n### some rules\n\n1. Each icon must be a single element\n2. Don't use extra color (just the currentColor and transparen), except for colored icons...\n3. Use relative font size units (em) to let the icon resize \n4. Color icons must have a standard icon and color must be justify (brand color)\n5. Avoid transform on the base element (except rotation when it applies to the whole icon)\n6. Use gradients sparingly (because IE doesn't love it)\n\n### debug mode\n\nIf you want to fork, modify or create new icons, you can use the [debug mode](https://viglino.github.io/iconicss/?debug\u0026icon=bug).   \nJust click on the button on top of the `index.html` page to access a page with one css per icon. Thus the icon's css can be easealy accessed, modified and saved directly in your browser.\n\nIf you create a new icon, be sure to add a css with its name in the `./css` directory and add an entry in the [config.json](https://github.com/Viglino/iconicss/blob/master/config.json) file of the project.\n\nIndividual css don't include prefixed methods: they are added using `gulp-autoprefixer` when building the project.     \nTo achieve the task it uses the gulp command. \n\n### building with gulp\n\nTo install Gulp, you must first download and install [node.js](https://nodejs.org/en/).\nThen, from the command line:\n1. Install gulp globally with `npm install -g gulp`.\n2. Navigate to the root `/iconicss` directory, then run `npm install`. npm will look at the package.json file and automatically install the necessary local dependencies listed there.\n\nWhen completed, you'll be able to run the `gulp` commands provided from the command line to create the distribution files in the `./dist` directory of the project.\n\n## Bugs\n\nPlease use the [GitHub issue tracker](https://github.com/Viglino/iconicss/issues) for all bugs and feature requests. Before creating a new issue, do a quick search to see if the problem has been reported already.\n\n## Licence\nCopyright (c) 2017 Jean-Marc Viglino. Licensed under [MIT Licence](https://github.com/michaelmawhinney/elementary/blob/master/LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fviglino%2Ficonicss","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fviglino%2Ficonicss","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fviglino%2Ficonicss/lists"}