{"id":13773189,"url":"https://github.com/Dellos7/local-icons","last_synced_at":"2025-05-11T05:34:32.537Z","repository":{"id":121780784,"uuid":"115932736","full_name":"Dellos7/local-icons","owner":"Dellos7","description":"Easy local icons in HTML - do not import external CSS","archived":false,"fork":false,"pushed_at":"2018-01-29T23:41:27.000Z","size":6490,"stargazers_count":15,"open_issues_count":0,"forks_count":4,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-02-14T06:35:47.414Z","etag":null,"topics":["base64","css","easy","easy-to-use","font-awesome","html","html5","icon","icons","local","png","social-media","static","svg","svg-icons"],"latest_commit_sha":null,"homepage":"","language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Dellos7.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2018-01-01T16:57:52.000Z","updated_at":"2024-02-14T06:35:47.415Z","dependencies_parsed_at":"2023-03-17T13:45:49.585Z","dependency_job_id":null,"html_url":"https://github.com/Dellos7/local-icons","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dellos7%2Flocal-icons","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dellos7%2Flocal-icons/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dellos7%2Flocal-icons/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dellos7%2Flocal-icons/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Dellos7","download_url":"https://codeload.github.com/Dellos7/local-icons/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253523690,"owners_count":21921815,"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":["base64","css","easy","easy-to-use","font-awesome","html","html5","icon","icons","local","png","social-media","static","svg","svg-icons"],"created_at":"2024-08-03T17:01:12.476Z","updated_at":"2025-05-11T05:34:27.523Z","avatar_url":"https://github.com/Dellos7.png","language":"PHP","funding_links":[],"categories":["See also"],"sub_categories":["Linux support"],"readme":"# local-icons\n\n\u003e This repo has been created recently, I'm trying to upload the icons as fast as I can. Check out the [roadmap](#roadmap).\n\nPut any icon in your HTML web page in a sooo easy way!\n\nThe aim of this repo is help people to easily put icons in their web pages without having to do too much work. I also want to make this repo a collection of icons where people can find them easily and just copy/paste to use them.\n\n- **Copy/paste** the icon CSS class into your stylesheet in order to have the icon shown in your HTML.\n- No need to import external css files, only use the provided CSS class and enjoy.\n\n## Table of contents\n* [Example SVG](#example-svg)\n* [Example PNG](#example-png)\n* [Create your own icon](#create-your-own-icon)\n* [Roadmap](#roadmap)\n* [Credits](#license)\n* [Related \u0026 Similar projects](#related-and-similar-projects)\n* [The icons](#the-icons)\n\t* [Social media icons list](#social-media-icons-list)\n\t* [Fontawesome black icons list](#fontawesome-black-icons-list)\n\t* [Fontawesome white icons list](#fontawesome-white-icons-list)\n\n\n## Example SVG\n\nHTML code:\n\n```html\n\u003ci class=\"android-svg-icon\"\u003e\u003c/i\u003e\n```\n\nCSS class:\n```css\n.android-svg-icon {\n\twidth: 30px;\n\theight: 30px;\n\tbackground-size: cover;\n\tbackground-repeat: no-repeat;\n\tdisplay: inline-block;\n\tbackground-image: url(\n\t\tdata:image/svg+xml;base64,PD9....\u003crest_of_the_base64_string\u003e);\n}\n```\n\nwould output the icon:\n\n\u003cimg src=\"icons/android-svg/android-svg.svg\" width=\"30\"\u003e\n\n\u003e The whole base64 string of the android icon is located [here](https://raw.githubusercontent.com/Dellos7/local-icons/master/icons/android-svg/android-svg.base64)\n\n## Example PNG\n\nHTML code:\n\n```html\n\u003ci class=\"apple-icon\"\u003e\u003c/i\u003e\n```\n\nCSS class:\n```css\n.apple-icon {\n\twidth: 30px;\n\theight: 30px;\n\tbackground-size: cover;\n\tbackground-repeat: no-repeat;\n\tdisplay: inline-block;\n\tbackground-image: url(\n\t\tdata:image/png;base64,iVB....\u003crest_of_the_base64_string\u003e);\n}\n```\n\nwould output the icon:\n\n\u003cimg src=\"icons/apple/apple.png\" width=\"30\"\u003e\n\n\u003e The whole base64 string of the apple icon is located [here](https://raw.githubusercontent.com/Dellos7/local-icons/master/icons/apple/apple.base64)\n\n## Create your own icon\n\n**Manual way**\n\u003e Copy \u0026 create each CSS class manually.\n\n1. Go to https://www.base64-image.de/\n2. Upload or drag \u0026 drop the icon image.\n3. Wait for the progress to finish.\n4. Click on the `copy css` button.\n5. Put the copied stuff into a CSS class, like this (replace `\u003ccopied_stuff\u003e`):\n```css\n.my-awesome-icon {\n\twidth: 30px;\n\theight: 30px;\n\tbackground-size: cover;\n\tbackground-repeat: no-repeat;\n\tdisplay: inline-block;\n\tbackground-image: \u003ccopied_stuff\u003e\n}\n```\n6. Use it!\n```html\n\u003ci class=\"my-awesome-icon\"\u003e\u003c/i\u003e\n```\n\n**Using the script**\n\u003e Allows creating the CSS classes in an automatic way for multiple icons.\n\nI've created an automatic PHP script in order to create the icon CSS classes easier.\n\nPut your icon(s) in the folder **faw-icons-png** and do the following:\n\n`cd faw-icons-png`\n\n`../script/icon-generator.php -d 1 -t png`\n\n`find . -type d -exec mv {} ../icons \\;`\n\n## Roadmap\n\n- Upload all the icons from [encharm/Font-Awesome-SVG-PNG](https://github.com/encharm/Font-Awesome-SVG-PNG). Black \u0026 white.\n- Upload all the icons from [neilorangepeel/Free-Social-Icons](https://github.com/neilorangepeel/Free-Social-Icons)\n- Create an automated script to pick a PNG or SVG image and create all the files and CSS code in order to be ready to upload to this repo.\n- Create a \"Create your own icon\" section.\n- Create a \"Contribution guidelines\" section.\n- Create a PNG image icon example. :white_check_mark:\n- Create an SVG image icon example. :white_check_mark:\n- Improve the `example.html` file.\n\n## Credits\n\n- I got the idea of creating this repo reading [this wiki](https://github.com/barryclark/jekyll-now/wiki/Adding-Icons) from [barryclark/jekyll-now](https://github.com/barryclark/jekyll-now).\n- All the credits should go to them who have made available the icons for us:\n    - [neilorangepeel/Free-Social-Icons](https://github.com/neilorangepeel/Free-Social-Icons). Great social-media SVG icons!\n    - [encharm/Font-Awesome-SVG-PNG](https://github.com/encharm/Font-Awesome-SVG-PNG), allowing to download PNG \u0026 SVG icons of [fontawesome.io/icons](http://fontawesome.io/icons/)\n\n## License\n\n- This repo's License: [GPL 3.0 License](https://choosealicense.com/licenses/gpl-3.0/)\n- [neilorangepeel/Free-Social-Icons](https://github.com/neilorangepeel/Free-Social-Icons) : [GPL 3.0 License](https://choosealicense.com/licenses/gpl-3.0/)\n- [encharm/Font-Awesome-SVG-PNG](https://github.com/encharm/Font-Awesome-SVG-PNG) : [MIT License](https://choosealicense.com/licenses/mit/)\n- [fontawesome.io/icons](http://fontawesome.io/icons/) : [SIL OFL 1.1 License](http://scripts.sil.org/OFL)\n\n# Related and Similar projects\n\nHere you can find similar projects that may interest yout when working with icons:\n- [ladjs/font-awesome-assets](https://github.com/ladjs/font-awesome-assets). `npm` package that allows you to create `svg` and `img` HTML tags of the **fontawesome icons** and apply customizations in the color and opacity of the icon. Examples: \u003cimg src=\"https://cdn.rawgit.com/crocodilejs/font-awesome-assets/master/media/rainbow/amazon.svg\" width=\"16\" height=\"16\" title=\"amazon\" alt=\"amazon\" /\u003e \u003cimg src=\"https://cdn.rawgit.com/crocodilejs/font-awesome-assets/master/media/rainbow/instagram.svg\" width=\"16\" height=\"16\" title=\"instagram\" alt=\"instagram\" /\u003e \u003cimg src=\"https://cdn.rawgit.com/crocodilejs/font-awesome-assets/master/media/rainbow/taxi.svg\" width=\"16\" height=\"16\" title=\"taxi\" alt=\"taxi\" /\u003e \u003cimg src=\"https://cdn.rawgit.com/crocodilejs/font-awesome-assets/master/media/rainbow/whatsapp.svg\" width=\"16\" height=\"16\" title=\"whatsapp\" alt=\"whatsapp\" /\u003e\n\n## The icons\n\nBelow I will be listing all the icons that we've got currently available. Just **copy/pase** the CSS located at the **CSS code** colum in your CSS stylesheet and create an HTML element (usually you will be using `\u003ci\u003e\u003c/i\u003e`) with the CSS class name of the **CSS class name** column.\n\n\u003e You can modify the **width** and **height** of the icon modifying those properties in the CSS code; default they are `width: 30px` and `height: 30px`.\n\nLists:\n\n- [Social media icons list](#social-media-icons-list)\n- [Fontawesome black icons list](#fontawesome-black-icons-list)\n\n## Social media icons list\n\n**Source**: [neilorangepeel/Free-Social-Icons](https://github.com/neilorangepeel/Free-Social-Icons)\n\n| Icon    | CSS class name | CSS code | Preview  |Format     |\n|---------|----------------|----------|----------|-----------|\n| android | `android-svg-icon`      |    [android svg](https://github.com/Dellos7/local-icons/blob/master/icons/android-svg/android-svg.css)      | \u003cimg src=\"icons/android-svg/android-svg.svg\" width=\"30\"\u003e | SVG |\n| apple | `apple-svg-icon`      |    [apple svg](https://github.com/Dellos7/local-icons/blob/master/icons/apple-svg/apple-svg.css)      | \u003cimg src=\"icons/apple-svg/apple-svg.svg\" width=\"30\"\u003e | SVG |\n| ... | ... | ... | ... | ... |\n\n[See the full list](social-media-icons-list.md)\n\n## Fontawesome black icons list\n\n**Source**: [encharm/Font-Awesome-SVG-PNG](https://github.com/encharm/Font-Awesome-SVG-PNG).\n\n| Icon    | CSS class name | CSS code | Preview  | Format    |\n|---------|----------------|----------|----------|-----------|\n| 500px | `500px-icon` | [500px](https://github.com/Dellos7/local-icons/blob/master/icons/500px/500px.css) | \u003cimg src=\"icons/500px/500px.png\" width=\"30\"\u003e | PNG |\n| address-book-o | `address-book-o-icon` | [address-book-o](https://github.com/Dellos7/local-icons/blob/master/icons/address-book-o/address-book-o.css) | \u003cimg src=\"icons/address-book-o/address-book-o.png\" width=\"30\"\u003e | PNG |\n| address-book | `address-book-icon` | [address-book](https://github.com/Dellos7/local-icons/blob/master/icons/address-book/address-book.css) | \u003cimg src=\"icons/address-book/address-book.png\" width=\"30\"\u003e | PNG |\n| address-card-o | `address-card-o-icon` | [address-card-o](https://github.com/Dellos7/local-icons/blob/master/icons/address-card-o/address-card-o.css) | \u003cimg src=\"icons/address-card-o/address-card-o.png\" width=\"30\"\u003e | PNG |\n| address-card | `address-card-icon` | [address-card](https://github.com/Dellos7/local-icons/blob/master/icons/address-card/address-card.css) | \u003cimg src=\"icons/address-card/address-card.png\" width=\"30\"\u003e | PNG |\n| ... | ... | ... | ... | ... |\n\n[See the full list](fontawesome-black-icons-list.md)\n\n## Fontawesome white icons list\n\n**Source**: [encharm/Font-Awesome-SVG-PNG](https://github.com/encharm/Font-Awesome-SVG-PNG).\n\n| Icon    | CSS class name | CSS code | Preview  | Format    |\n|---------|----------------|----------|----------|-----------|\n| ... | ... | ... | ... | ... |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FDellos7%2Flocal-icons","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FDellos7%2Flocal-icons","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FDellos7%2Flocal-icons/lists"}