{"id":13759614,"url":"https://github.com/Typogram/Anicons","last_synced_at":"2025-05-10T09:33:15.217Z","repository":{"id":62982002,"uuid":"200685804","full_name":"Typogram/Anicons","owner":"Typogram","description":"Anicons: a new kind of icon fonts with baked-in animation and colors","archived":false,"fork":false,"pushed_at":"2022-06-17T03:55:04.000Z","size":14229,"stargazers_count":154,"open_issues_count":11,"forks_count":9,"subscribers_count":6,"default_branch":"master","last_synced_at":"2024-11-16T16:37:14.985Z","etag":null,"topics":["icons","materialdesign","variablefonts"],"latest_commit_sha":null,"homepage":"https://typogram.github.io/Anicons/","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/Typogram.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":"2019-08-05T15:51:40.000Z","updated_at":"2024-11-05T07:54:20.000Z","dependencies_parsed_at":"2022-11-10T09:00:37.783Z","dependency_job_id":null,"html_url":"https://github.com/Typogram/Anicons","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Typogram%2FAnicons","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Typogram%2FAnicons/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Typogram%2FAnicons/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Typogram%2FAnicons/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Typogram","download_url":"https://codeload.github.com/Typogram/Anicons/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253397474,"owners_count":21902027,"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":["icons","materialdesign","variablefonts"],"created_at":"2024-08-03T13:00:56.315Z","updated_at":"2025-05-10T09:33:14.901Z","avatar_url":"https://github.com/Typogram.png","language":"CSS","funding_links":[],"categories":["CSS"],"sub_categories":[],"readme":"# Anicons \r\n\r\nAnicons is the first animated color variable icon font. It is made with two types of technologies: Variable Fonts and Color Fonts. We want to experiment with creating an icon font that combines these two cutting edge font technologies.\r\n\r\n## Icons\r\n- menu\r\n- play\r\n- favorite\r\n- thumb_up\r\n- check\r\n- notifications\r\n- edit\r\n- lock\r\n- phone\r\n- search\r\n- location\r\n\r\n## Use Anicons in your design projects \r\nYou can easily incorporate Anicons into your design projects by installing it onto your machine. When you download the Anicons project files, it comes with static versions of the icon font with two weights: Start and End. The static versions help you plan how you will Anicons in your project.\r\n\r\n\u003cbr/\u003e\r\n\r\n\u003cimg width=\"379\" alt=\"AniconStatStart\" src=\"https://user-images.githubusercontent.com/41246474/72045540-587ed380-3284-11ea-8c9a-bea3bdfdcd57.png\"\u003e\u003cbr/\u003e\r\nStart shows the icon at the starting stage of the animation\r\n\r\n\r\n\u003cimg width=\"379\" alt=\"AniconStatEnd\" src=\"https://user-images.githubusercontent.com/41246474/72045570-6d5b6700-3284-11ea-8ea6-08b6993b30a5.png\"\u003e\u003cbr/\u003e\r\nEnd shows the icon at the ending stage of the animation\r\n\r\n\r\n\r\n## Use Anicons on the Web\r\n\r\n##### 1. Embed Font\r\nTo embed Anicons fonts into a webpage, copy this code into the \u003chead\u003e of your HTML document. \r\n\r\nUse the following HTML to embed Anicons Regular:\r\n```\r\n\u003clink href=\"https://fonts.googleapis.com/css?family=Anicons+Regular\u0026display=swap\" rel=\"stylesheet\"\u003e\r\n```\r\nUse the following HTML to embed Anicons Color:\r\n```\r\n\u003clink href=\"https://fonts.googleapis.com/css?family=Anicons+Color\u0026display=swap\" rel=\"stylesheet\"\u003e\r\n```\r\nUse the following HTML to embed Anicons Regular and Anicons Color:\r\n```\r\n\u003clink href=\"https://fonts.googleapis.com/css?family=Anicons+Regular|Anicons+Color\u0026display=swap\" rel=\"stylesheet\"\u003e\r\n```\r\n##### 2. Specify Icon Character in HTML\r\n\r\nUse the following HTML to specify the icon character:\r\n```\r\n\u003c!-- replace “A” with appropriate character.--\u003e \r\n\u003cdiv class=”icon”\u003eA\u003c/div\u003e\r\n```\r\n##### 3. Specify Font Family in CSS\r\n\r\nUse the following CSS rules to specify the families:\r\n```\r\nfont-family: \"Anicons Regular\", sans-serif;\r\nfont-family: \"Anicons Color\", sans-serif;\r\n```\r\n##### 4. Animate\r\nUse the following CSS rules to animate the icon. `font-variation-settings` provides control over the variable font characteristics, (in our case, time) of our icon font. \r\n```\r\n.icon {\r\n\tfont-variation-settings: \"TIME\" 1;\r\n\ttransition: font-variation-settings 0.4s ease;\r\n}\r\n.icon:hover {\r\n\tfont-variation-settings: \"TIME\" 100;\r\n}\r\n```\r\nor use @keyframes animation:\r\n```\r\n@keyframes icon-animation {\r\n\t0% { font-variation-settings: \"TIME\" 1; }\r\n\t100% { font-variation-settings: \"TIME\" 100; }\r\n}\r\n.icon {\r\n\tanimation: icon-animation .5s ease-in-out infinite;\r\n}\r\n```\r\n## Reference\r\nhttps://www.harbortype.com/blog/rocher-color-making-a-variable-color-font/\r\n\u003cbr/\u003e\r\nhttps://glyphsapp.com/tutorials/creating-a-variable-font\r\n\r\n\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FTypogram%2FAnicons","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FTypogram%2FAnicons","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FTypogram%2FAnicons/lists"}