{"id":32114854,"url":"https://github.com/j-panasiuk/elm-ionicons","last_synced_at":"2026-02-24T01:34:57.354Z","repository":{"id":57675130,"uuid":"104641583","full_name":"j-panasiuk/elm-ionicons","owner":"j-panasiuk","description":"The premium icon font for Ionic Framework. Now available in Elm!","archived":false,"fork":false,"pushed_at":"2018-09-25T20:05:56.000Z","size":688,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-29T06:44:59.157Z","etag":null,"topics":["elm","iconset","ionicons"],"latest_commit_sha":null,"homepage":"http://package.elm-lang.org/packages/j-panasiuk/elm-ionicons/latest","language":"Elm","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/j-panasiuk.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}},"created_at":"2017-09-24T12:18:20.000Z","updated_at":"2019-10-04T05:00:35.000Z","dependencies_parsed_at":"2022-09-02T17:08:57.924Z","dependency_job_id":null,"html_url":"https://github.com/j-panasiuk/elm-ionicons","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/j-panasiuk/elm-ionicons","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/j-panasiuk%2Felm-ionicons","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/j-panasiuk%2Felm-ionicons/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/j-panasiuk%2Felm-ionicons/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/j-panasiuk%2Felm-ionicons/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/j-panasiuk","download_url":"https://codeload.github.com/j-panasiuk/elm-ionicons/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/j-panasiuk%2Felm-ionicons/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29766794,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-24T01:28:30.166Z","status":"ssl_error","status_checked_at":"2026-02-24T01:28:27.518Z","response_time":90,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["elm","iconset","ionicons"],"created_at":"2025-10-20T15:36:25.339Z","updated_at":"2026-02-24T01:34:57.339Z","avatar_url":"https://github.com/j-panasiuk.png","language":"Elm","funding_links":[],"categories":[],"sub_categories":[],"readme":"# elm-ionicons\nThe premium icon pack for [Ionic Framework](http://ionicframework.com/) (check out Ionicons website [here](http://ionicons.com/))\n\n## Demo\n[Browse all icons here](https://j-panasiuk.github.io/elm-ionicons)\n\n## Overview\nUse 700+ SVG ionicons directly in your Elm views. The icons are grouped into:\n* Ionicon\n* Ionicon.Android\n* Ionicon.Ios\n* Ionicon.Social\n\n## Installation\n\n### Elm 0.19\n```\nelm install j-panasiuk/elm-ionicons\n```\n\n### Elm 0.18\n```\nelm package install j-panasiuk/elm-ionicons\n```\n\n## Dependencies\n\n### Elm 0.19\n- [elm/svg](https://package.elm-lang.org/packages/elm/svg/latest/)\n\n### Elm 0.18\n- [elm-lang/svg](https://package.elm-lang.org/packages/elm-lang/svg/latest)\n\n## Example use\nEach icon expects size (width and height in pixels) and a color\n\n### Elm 0.19\n\n```elm\nimport Html exposing (Html, div)\nimport Ionicon\nimport Ionicon.Android as Android\n\n\nmain : Html msg\nmain =\n    div []\n        [ Ionicon.alert 32 red\n        , Android.alarmClock 32 blueish\n        ]\n\n\n-- Define your colors\n\nred : RGBA\nred =\n    RGBA 1 0 0 1\n\n\nblueish : RGBA\nblueish =\n    RGBA 0 0 1 0.5\n\n\n-- Now that `Color` module is gone from core\n-- we just represent color as a record with\n-- Float values in 0-1 range\n\ntype alias RGBA =\n    { red : Float\n    , green : Float\n    , blue : Float\n    , alpha : Float\n    }\n```\n\n### Elm 0.19 + elm-ui\n\nHere is an example how icons could be used as an elm-ui elements\n```elm\nimport Element exposing (Element, el, html)\nimport Ionicon.Social as Social\n\n\ntype alias RGBA =\n    { red : Float\n    , green : Float\n    , blue : Float\n    , alpha : Float\n    }\n\n\ntype alias Icon msg =\n    Int -\u003e RGBA -\u003e Html msg\n\n\nviewIcon : Icon msg -\u003e Int -\u003e RGBA -\u003e Element msg\nviewIcon icon size color =\n    el [ centerX, centerY ] \u003c| html \u003c| icon size color\n\n\nviewLargeGitHubIcon : RGBA -\u003e Element msg\nviewLargeGitHubIcon color =\n    viewIcon Social.github 80 color\n```\n\n### Elm 0.18\n\n```elm\nimport Html exposing (Html, div)\nimport Color exposing (Color)\nimport Ionicon\nimport Ionicon.Android as Android\n\n\nmain : Html msg\nmain =\n    div []\n        [ Ionicon.alert 32 red\n        , Android.alarmClock 32 blueish\n        ]\n\n\n-- Define your colors\n\nred : Color\nred =\n    Color.rgb 255 0 0\n\n\nblueish : Color\nblueish =\n    Color.rgba 0 0 255 0.5\n```\n\n### Note: SVG icons vs Font icons\n\nYou can also use iconicons as a web font by including a css stylesheet, like [link](here).\n```html\n\u003clink href=\"https://unpkg.com/ionicons@4.4.2/dist/css/ionicons.min.css\" rel=\"stylesheet\"\u003e\n```\nWhen minified and gzipped these icons weight around 8kB\n\nBefore Elm 0.19, using any number of icons from this package meant that code for all 700+ of them was included in your bundle. With 0.19 dead code elimination (`elm make --optimize`) only the icons that are actually used by your project will be included.\n\nComparing the two approaches, using a stylesheet is a bit more lightweight and doesn't require adding any elm dependencies. On the other hand with this package you don't rely on external css files from CDN. Also you can use all icons as plain old elm functions and forget about css classes (this is particularly nice if you use [mdgriffith/elm-ui](https://github.com/mdgriffith/elm-ui))\n\n## License\nMIT\n\n## Thanks\nAs always, I would like to thank my Mom! :)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fj-panasiuk%2Felm-ionicons","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fj-panasiuk%2Felm-ionicons","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fj-panasiuk%2Felm-ionicons/lists"}