[
{
"path": ".github/ISSUE_TEMPLATE/bug_report.yml",
"content": "name: π Bug Report\ndescription: Report a bug in the ion-icon component. Incorrect icons should use the \"Incorrect Icon\" template instead.\nlabels: ['triage']\ntitle: 'bug: '\nbody:\n - type: textarea\n attributes:\n label: Current Behavior\n description: A clear description of what the bug is and how it manifests.\n validations:\n required: true\n - type: textarea\n attributes:\n label: Expected Behavior\n description: A clear description of what you expected to happen.\n validations:\n required: true\n - type: textarea\n attributes:\n label: Steps to Reproduce\n description: Please explain the steps required to duplicate this issue.\n validations:\n required: true\n - type: input\n attributes:\n label: Code Reproduction URL\n description: Please provide an application with the minimum code required to reproduce the issue. This is the best way to ensure this issue is triaged quickly. Issues without a code reproduction may be closed if the Ionic Team cannot reproduce the issue you are reporting.\n placeholder: https://github.com/...\n - type: textarea\n attributes:\n label: Additional Information\n description: List any other information that is relevant to your issue. Stack traces, related issues, suggestions on how to fix, Stack Overflow links, forum links, etc.\n"
},
{
"path": ".github/ISSUE_TEMPLATE/feature_request.yml",
"content": "name: π‘ Feature Request\ndescription: Suggest a new feature for the ion-icon component. Icon requests should use the \"Icon Request\" template instead.\nlabels: ['triage']\ntitle: 'feat: '\nbody:\n - type: textarea\n attributes:\n label: Describe Problem\n description: A clear and concise description of what the problem is. Ex. I am always frustrated when [...]\n validations:\n required: true\n - type: textarea\n attributes:\n label: Describe Preferred Solution\n description: A clear and concise description of what you want to happen.\n - type: textarea\n attributes:\n label: Describe Alternatives\n description: A clear and concise description of any alternative solutions or features you have considered.\n - type: textarea\n attributes:\n label: Additional Information\n description: Add any other context or screenshots about the feature request here.\n"
},
{
"path": ".github/ISSUE_TEMPLATE/icon_request.yml",
"content": "name: π Icon Request\ndescription: Request a new icon\nlabels: ['triage']\ntitle: 'icon request: '\nbody:\n - type: textarea\n attributes:\n label: Describe the Icon\n description: A clear and concise description of the icon you would like added.\n validations:\n required: true\n - type: textarea\n attributes:\n label: Links to Examples\n description: Add links to any examples of the icon in other libraries that you like.\n - type: textarea\n attributes:\n label: Additional Information\n description: Add any other context about the icon request here.\n"
},
{
"path": ".github/ISSUE_TEMPLATE/incorrect_icon.yml",
"content": "name: π Incorrect Icon\ndescription: Report an incorrect icon\nlabels: ['triage']\ntitle: 'incorrect icon: '\nbody:\n - type: textarea\n attributes:\n label: Describe the Issue\n description: A clear description of what is wrong with the icon. Please include any relevant screenshots.\n validations:\n required: true\n - type: textarea\n attributes:\n label: Expected Behavior\n description: A clear description of what the icon should look like. Please include any relevant screenshots.\n validations:\n required: true\n"
},
{
"path": ".github/ionic-issue-bot.yml",
"content": "triage:\n label: triage\n dryRun: false\n\ncloseAndLock:\n labels:\n - label: 'ionitron: support'\n message: >\n Thanks for the issue! This issue appears to be a support request. We use this issue tracker exclusively for\n bug reports and feature requests. Please use our [forum](https://forum.ionicframework.com/) for help or\n questions about Ionicons.\n\n\n Thank you for using Ionicons!\n - label: 'ionitron: missing template'\n message: >\n Thanks for the issue! It appears that you have not filled out the provided issue template. We use this issue\n template in order to gather more information and further assist you. Please create a new issue and ensure the\n template is fully filled out.\n\n\n Thank you for using Ionicons!\n close: true\n lock: true\n dryRun: false\n\ncomment:\n labels:\n - label: 'help wanted'\n message: >\n This issue has been labeled as `help wanted`. This label is added to issues\n that we believe would be good for contributors.\n\n\n If you'd like to work on this issue, please comment here letting us know that\n you would like to submit a pull request for it. This helps us to keep track of\n the pull request and make sure there isn't duplicated effort.\n\n\n For a guide on how to create a pull request and test this project locally to see\n your changes, see our [contributing documentation](https://github.com/ionic-team/ionicons/blob/main/.github/CONTRIBUTING.md#creating-a-pull-request).\n\n\n Thank you!\n - label: 'ionitron: needs reproduction'\n message: >\n Thanks for the issue! This issue has been labeled as `needs reproduction`. This label is added to issues that\n need a code reproduction.\n\n\n Please reproduce this issue and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a\n reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.\n\n\n If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was\n not enough for our team to reproduce the issue.\n - label: 'community feedback wanted'\n message: >\n This issue has been labeled as `community feedback wanted`. This label is added to issues that we would like to hear from the community on before moving forward with any final decision on the feature request.\n\n\n If the requested feature is something you would find useful for your applications, please react to the original post with π (`+1`). If you would like to provide an additional use case for the feature, please post a comment.\n\n\n The team will review this feedback and make a final decision. Any decision will be posted on this thread, but please note that we may ultimately decide not to pursue this feature.\n\n\n Thank you!\n dryRun: false\n\nnoReply:\n days: 14\n maxIssuesPerRun: 100\n label: 'needs: reply'\n responseLabel: triage\n exemptProjects: true\n exemptMilestones: true\n message: >\n Thanks for the issue! This issue is being closed due to the lack of a reply. If this is still\n an issue with the latest version of Ionicons, please create a new issue and ensure the\n template is fully filled out.\n\n\n Thank you for using Ionicons!\n close: true\n lock: true\n dryRun: false\n\nnoReproduction:\n days: 14\n maxIssuesPerRun: 100\n label: 'ionitron: needs reproduction'\n responseLabel: triage\n exemptProjects: true\n exemptMilestones: true\n message: >\n Thanks for the issue! This issue is being closed due to the lack of a code reproduction. If this is still\n an issue with the latest version of Ionicons, please create a new issue and ensure the\n template is fully filled out.\n\n\n Thank you for using Ionicons!\n close: true\n lock: true\n dryRun: false\n"
},
{
"path": ".github/workflows/actions/build-core/action.yml",
"content": "name: 'Build Ionicons'\ndescription: 'Build Ionicons'\nruns:\n using: 'composite'\n steps:\n - uses: actions/checkout@v4\n with:\n # Checkout the latest commit in this branch\n ref: ${{ github.event.pull_request.head.sha }}\n - uses: actions/setup-node@v4\n\n - name: Cache Node Modules\n uses: actions/cache@v4\n env:\n cache-name: node-modules\n with:\n path: ./node_modules\n key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('./package-lock.json') }}-v1\n - name: Install Dependencies\n run: npm install\n shell: bash\n - name: Build\n run: npm run build\n shell: bash\n - uses: ./.github/workflows/actions/upload-archive\n with:\n name: ionicons-build\n output: IoniconsBuild.zip\n paths: dist components icons www\n - uses: ./.github/workflows/actions/upload-archive\n with:\n name: ionicons-src\n output: IoniconsSrc.zip\n paths: src\n"
},
{
"path": ".github/workflows/actions/download-archive/action.yml",
"content": "name: 'Archive Download'\ndescription: 'Downloads and decompresses an archive from a previous job'\ninputs:\n path:\n description: 'Input archive name'\n filename:\n description: 'Input file name'\n name:\n description: 'Archive name'\nruns:\n using: 'composite'\n steps:\n - uses: actions/download-artifact@v4\n with:\n name: ${{ inputs.name }}\n path: ${{ inputs.path }}\n - name: Exract Archive\n run: unzip -q -o ${{ inputs.path }}/${{ inputs.filename }}\n shell: bash\n"
},
{
"path": ".github/workflows/actions/publish-npm/action.yml",
"content": "name: 'Release'\ndescription: 'Releases a package'\ninputs:\n version:\n description: 'The type of version to release.'\n tag:\n description: 'The tag to publish to on NPM.'\n working-directory:\n description: 'The directory of the package.'\n folder:\n default: './'\n description: 'A folder containing a package.json file.'\n createRelease:\n description: 'Create a release on GitHub.'\n default: 'false'\n ghToken:\n description: 'The GitHub authentication token required to create a release.'\n\nruns:\n using: 'composite'\n steps:\n - uses: actions/setup-node@v4\n with:\n node-version: 22.x\n - name: Install latest npm\n run: npm install -g npm@latest\n shell: bash\n - name: Install Dependencies\n run: npm ci\n shell: bash\n working-directory: ${{ inputs.working-directory }}\n - name: Set Git User\n run: |\n git config user.name ionitron\n git config user.email hi@ionicframework.com\n shell: bash\n - name: Update Version\n id: update_version\n run: |\n npm version ${{ inputs.version }}\n echo \"VERSION=$(node -p \"require('./package.json').version\")\" >> $GITHUB_ENV\n shell: bash\n working-directory: ${{ inputs.working-directory }}\n - name: Run Build\n run: npm run build\n shell: bash\n working-directory: ${{ inputs.working-directory }}\n - name: Publish to NPM\n run: npm publish ${{ inputs.folder }} --tag ${{ inputs.tag }} --provenance\n shell: bash\n working-directory: ${{ inputs.working-directory }}\n\n - name: Create Release\n if: ${{ inputs.createRelease == 'true' }}\n run: |\n git remote set-url origin https://${GH_TOKEN}:x-oauth-basic@github.com/ionic-team/ionicons.git\n git remote -v\n git push origin main --tags\n gh release create \"v$VERSION\" --title \"v$VERSION\" --generate-notes\n shell: bash\n env:\n GH_TOKEN: ${{ inputs.ghToken }}\n VERSION: ${{ env.VERSION }}\n"
},
{
"path": ".github/workflows/actions/test-e2e/action.yml",
"content": "name: 'Test E2E'\ndescription: 'Test E2E'\ninputs:\n shard:\n description: 'Playwright Test Shard (ex: 2)'\n totalShards:\n description: 'Playwright total number of test shards (ex: 4)'\n update:\n description: 'Whether or not to update the reference snapshots'\nruns:\n using: 'composite'\n steps:\n - uses: actions/setup-node@v4\n\n - name: Cache Node Modules\n uses: actions/cache@v4\n env:\n cache-name: node-modules\n with:\n path: ./node_modules\n key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('./package-lock.json') }}-v1\n - uses: ./.github/workflows/actions/download-archive\n with:\n name: ionicons-build\n path: .\n filename: IoniconsBuild.zip\n - uses: ./.github/workflows/actions/download-archive\n with:\n name: ionicons-src\n path: .\n filename: IoniconsSrc.zip\n - name: Install Playwright Dependencies\n run: npx playwright install && npx playwright install-deps\n shell: bash\n - name: Test\n if: inputs.update != 'true'\n run: npx playwright test --shard=${{ inputs.shard }}/${{ inputs.totalShards }}\n shell: bash\n - name: Test and Update\n id: test-and-update\n if: inputs.update == 'true'\n # Keep track of the files that were\n # changed so they can be correctly restored\n # in the combine step.\n # To do this, we move only the changed files\n # to a separate directory, while preserving the\n # directory structure of the source.\n # When, we create and archive of these results\n # so that the combine step can simply\n # unzip and move the changed files into place.\n # We have extra logic added so that job runners\n # that do not have any new screenshots do not create\n # an unnecessary .zip.\n run: |\n npx playwright test --shard=${{ inputs.shard }}/${{ inputs.totalShards }} --update-snapshots\n git add src/\\*.png --force\n mkdir updated-screenshots\n rsync -R --progress $(git diff --name-only --cached) updated-screenshots\n if [ \"$(ls -A updated-screenshots)\" ]; then\n echo \"hasUpdatedScreenshots=$(echo 'true')\" >> $GITHUB_OUTPUT\n cd updated-screenshots\n ls\n zip -q -r ../UpdatedScreenshots-${{ inputs.shard }}-${{ inputs.totalShards }}.zip ./\n fi\n shell: bash\n - name: Archive Updated Screenshots\n if: inputs.update == 'true' && steps.test-and-update.outputs.hasUpdatedScreenshots == 'true'\n uses: actions/upload-artifact@v4\n with:\n name: updated-screenshots-${{ inputs.shard }}-${{ inputs.totalShards }}\n path: UpdatedScreenshots-${{ inputs.shard }}-${{ inputs.totalShards }}.zip\n - name: Archive Test Results\n # The always() ensures that this step\n # runs even if the previous step fails.\n # We want the test results to be archived\n # even if the test fails in the previous\n # step, otherwise there would be no way\n # to debug these tests.\n if: always()\n uses: ./.github/workflows/actions/upload-archive\n with:\n name: test-results-${{ inputs.shard }}-${{ inputs.totalShards }}\n output: TestResults-${{ inputs.shard }}-${{ inputs.totalShards }}.zip\n paths: playwright-report\n"
},
{
"path": ".github/workflows/actions/test-spec/action.yml",
"content": "name: 'Test Spec'\ndescription: 'Test Spec'\nruns:\n using: 'composite'\n steps:\n - uses: actions/setup-node@v4\n\n - name: Cache Node Modules\n uses: actions/cache@v4\n env:\n cache-name: node-modules\n with:\n path: ./node_modules\n key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('./package-lock.json') }}-v1\n - uses: ./.github/workflows/actions/download-archive\n with:\n name: ionicons-build\n path: .\n filename: IoniconsBuild.zip\n - name: Test\n run: npm run test.spec -- --ci\n shell: bash\n"
},
{
"path": ".github/workflows/actions/update-reference-screenshots/action.yml",
"content": "name: 'Update Reference Screenshots'\ndescription: 'Update Reference Screenshots'\n\non:\n workflow_dispatch:\n\nruns:\n using: 'composite'\n steps:\n - uses: actions/setup-node@v4\n - uses: actions/download-artifact@v4\n with:\n path: ./artifacts\n - name: Extract Archives\n # This finds all .zip files in the ./artifacts\n # directory, including nested directories.\n # It then unzips every .zip to the root directory\n run: |\n find . -type f -name 'UpdatedScreenshots-*.zip' -exec unzip -q -o -d ../ {} \\;\n shell: bash\n working-directory: ./artifacts\n - name: Push Screenshots\n # Configure user as Ionitron\n # and push only the changed .png snapshots\n # to the remote branch.\n # Screenshots are in .gitignore\n # to prevent local screenshots from getting\n # pushed to Git. As a result, we need --force\n # here so that CI generated screenshots can\n # get added to git. Screenshot ground truths\n # should only be added via this CI process.\n run: |\n git config user.name ionitron\n git config user.email hi@ionicframework.com\n git add src/\\*.png --force\n git commit -m \"chore(): add updated snapshots\"\n git push\n shell: bash\n"
},
{
"path": ".github/workflows/actions/upload-archive/action.yml",
"content": "name: 'Archive Upload'\ndescription: 'Compresses and uploads an archive to be reused across jobs'\ninputs:\n paths:\n description: 'Paths to files or directories to archive'\n output:\n description: 'Output file name'\n name:\n description: 'Archive name'\nruns:\n using: 'composite'\n steps:\n - name: Create Archive\n run: zip -q -r ${{ inputs.output }} ${{ inputs.paths }}\n shell: bash\n - uses: actions/upload-artifact@v4\n with:\n name: ${{ inputs.name }}\n path: ${{ inputs.output }}\n"
},
{
"path": ".github/workflows/dev-release.yml",
"content": "name: 'Dev Release'\n\non:\n workflow_call:\n\njobs:\n create-dev-hash:\n runs-on: ubuntu-latest\n outputs:\n dev-hash: ${{ steps.create-dev-hash.outputs.DEV_HASH }}\n steps:\n - uses: actions/checkout@v4\n - name: Install Dependencies\n run: npm ci --no-package-lock\n shell: bash\n - id: create-dev-hash\n name: Create Dev Hash\n run: |\n echo \"DEV_HASH=$(node ./scripts/bump-version.js)-dev.1$(date +%s).1$(git log -1 --format=%H | cut -c 1-7)\" >> $GITHUB_OUTPUT\n shell: bash\n\n release-ionicons:\n runs-on: ubuntu-latest\n needs: [create-dev-hash]\n permissions:\n id-token: write\n steps:\n - name: Checkout\n uses: actions/checkout@v4\n - name: Publish to NPM\n uses: ./.github/workflows/actions/publish-npm\n with:\n tag: dev\n version: ${{ needs.create-dev-hash.outputs.dev-hash }}\n working-directory: './'\n createRelease: 'false'\n\n get-build:\n name: Get your dev build!\n runs-on: ubuntu-latest\n needs: [create-dev-hash, release-ionicons]\n steps:\n - run: echo ${{ needs.create-dev-hash.outputs.dev-hash }}\n"
},
{
"path": ".github/workflows/production-release.yml",
"content": "name: 'Production Release'\n\non:\n workflow_call:\n inputs:\n version:\n required: false\n type: string\n description: npm version (major, minor, or patch)\n\njobs:\n release-ionicons:\n runs-on: ubuntu-latest\n permissions:\n id-token: write\n steps:\n - name: Checkout\n uses: actions/checkout@v4\n with:\n token: ${{ secrets.IONITRON_TOKEN }}\n - name: Publish to NPM\n uses: ./.github/workflows/actions/publish-npm\n with:\n tag: latest\n version: ${{ inputs.version }}\n working-directory: './'\n createRelease: true\n ghToken: ${{ secrets.IONITRON_TOKEN }}\n"
},
{
"path": ".github/workflows/release-orchestrator.yml",
"content": "name: 'Release Orchestrator'\n\non:\n workflow_dispatch:\n inputs:\n release-type:\n description: 'Release type'\n required: true\n type: choice\n options:\n - dev\n - production\n version:\n description: 'Version for production releases'\n required: false\n type: choice\n options:\n - patch\n - minor\n - major\n\npermissions:\n id-token: write\n contents: read\n\njobs:\n run-dev:\n if: ${{ inputs.release-type == 'dev' }}\n uses: ./.github/workflows/dev-release.yml\n secrets: inherit\n\n run-production:\n if: ${{ inputs.release-type == 'production' }}\n uses: ./.github/workflows/production-release.yml\n secrets: inherit\n with:\n version: ${{ inputs.version }}\n"
},
{
"path": ".github/workflows/update-screenshots.yml",
"content": "name: 'Update Reference Screenshots'\n\non:\n workflow_dispatch:\n\njobs:\n build-core:\n runs-on: ubuntu-latest\n steps:\n - uses: actions/checkout@v4\n - uses: ./.github/workflows/actions/build-core\n\n test-e2e:\n strategy:\n # This ensures that all screenshot shard\n # failures are reported so the dev can\n # review everything at once.\n fail-fast: false\n matrix:\n # Divide the tests into n buckets\n # and run those buckets in parallel.\n # To increase the number of shards,\n # add new items to the shard array\n # and change the value of totalShards\n # to be the length of the shard array.\n shard: [1, 2, 3]\n totalShards: [3]\n needs: [build-core]\n runs-on: ubuntu-latest\n steps:\n - uses: actions/checkout@v4\n - uses: ./.github/workflows/actions/test-e2e\n with:\n shard: ${{ matrix.shard }}\n totalShards: ${{ matrix.totalShards }}\n update: true\n\n update-reference-screenshots:\n runs-on: ubuntu-latest\n needs: [test-e2e]\n steps:\n - uses: actions/checkout@v4\n # Normally, we could just push with the\n # default GITHUB_TOKEN, but that will\n # not cause the build workflow\n # to re-run. We use Ionitron's\n # Personal Access Token instead\n # to allow for this build workflow\n # to run when the screenshots are pushed.\n with:\n token: ${{ secrets.IONITRON_TOKEN }}\n - uses: ./.github/workflows/actions/update-reference-screenshots\n"
},
{
"path": ".github/workflows/validation.yml",
"content": "name: 'Validation'\n\non:\n pull_request:\n branches: ['**']\n push:\n branches: ['main']\n\n# When pushing a new commit we should\n# cancel the previous test run to not\n# consume more runners than we need to.\nconcurrency:\n group: ${{ github.ref }}\n cancel-in-progress: true\n\njobs:\n build-core:\n runs-on: ubuntu-latest\n steps:\n - uses: actions/checkout@v4\n with:\n # Checkout the latest commit in this branch\n ref: ${{ github.event.pull_request.head.sha }}\n - uses: ./.github/workflows/actions/build-core\n\n test-spec:\n needs: [build-core]\n runs-on: ubuntu-latest\n steps:\n - uses: actions/checkout@v4\n - uses: ./.github/workflows/actions/test-spec\n\n test-e2e:\n strategy:\n # This ensures that all screenshot shard\n # failures are reported so the dev can\n # review everything at once.\n fail-fast: false\n matrix:\n # Divide the tests into n buckets\n # and run those buckets in parallel.\n # To increase the number of shards,\n # add new items to the shard array\n # and change the value of totalShards\n # to be the length of the shard array.\n shard: [1, 2, 3]\n totalShards: [3]\n needs: [build-core]\n runs-on: ubuntu-latest\n steps:\n - uses: actions/checkout@v4\n - uses: ./.github/workflows/actions/test-e2e\n with:\n shard: ${{ matrix.shard }}\n totalShards: ${{ matrix.totalShards }}\n\n # Screenshots are required to pass\n # in order for the branch to be merge\n # eligible. However, the screenshot tests\n # are run on n runners where n can change\n # over time. The verify-screenshots step allows\n # us to have a required status check for screenshot\n # results without having to manually add each\n # matrix run in the branch protection rules\n # Source: https://github.community/t/status-check-for-a-matrix-jobs/127354\n verify-e2e:\n if: ${{ always() }}\n needs: test-e2e\n runs-on: ubuntu-latest\n steps:\n - name: Check build matrix status\n if: ${{ needs.test-e2e.result != 'success' }}\n run: exit 1\n"
},
{
"path": ".gitignore",
"content": "*~\n*.sw[mnpcod]\n*.log\n*.lock\n*.tmp\n*.tmp.*\nlog.txt\n*.sublime-project\n*.sublime-workspace\n.idea/\n.versions/\n.vscode/\n/components/\nnode_modules/\ntmp/\ndist/\nicons/\n.DS_Store\nscripts/*.js\n!scripts/install-loader.js\n\nwww/\n/test-results/\n/playwright-report/\n/playwright/.cache/\n/src/**/*-snapshots\n*.tgz"
},
{
"path": ".prettierrc.json",
"content": "{\n \"arrowParens\": \"always\",\n \"bracketSpacing\": true,\n \"jsxBracketSameLine\": false,\n \"jsxSingleQuote\": false,\n \"quoteProps\": \"consistent\",\n \"printWidth\": 120,\n \"semi\": true,\n \"singleQuote\": true,\n \"tabWidth\": 2,\n \"trailingComma\": \"all\",\n \"useTabs\": false\n}\n"
},
{
"path": "CHANGELOG.md",
"content": "# Change Log\n\nPlease see https://github.com/ionic-team/ionicons/releases"
},
{
"path": "CODE_OF_CONDUCT.md",
"content": "# Contributor Code of Conduct\n\nAs contributors and maintainers of the Ionicons project, we pledge to respect everyone who contributes by posting issues, updating documentation, submitting pull requests, providing feedback in comments, and any other activities.\n\nCommunication through any of Ionic's channels (GitHub, Slack, Forum, IRC, mailing lists, Twitter, etc.) must be constructive and never resort to personal attacks, trolling, public or private harassment, insults, or other unprofessional conduct.\n\nWe promise to extend courtesy and respect to everyone involved in this project regardless of gender, gender identity, sexual orientation, disability, age, race, ethnicity, religion, or level of experience. We expect anyone contributing to the Ionicons project to do the same.\n\nIf any member of the community violates this code of conduct, the maintainers of the Ionicons project may take action, removing issues, comments, and PRs or blocking accounts as deemed appropriate.\n\nIf you are subject to or witness unacceptable behavior, or have any other concerns, please email us at [hi@ionicframework.com](mailto:hi@ionicframework.com).\n"
},
{
"path": "CONTRIBUTING.md",
"content": "# Contributing to Ionicons\n\nThank you for your interest in contributing to Ionicons! :tada:\n\nThis document outlines the guidelines and processes for contributing to this project.\n\n## Table of Contents\n\n- [Contributing to Ionicons](#contributing-to-ionicons)\n - [Table of Contents](#table-of-contents)\n - [Code of Conduct](#code-of-conduct)\n - [Getting Started](#getting-started)\n - [Prerequisites](#prerequisites)\n - [Environment Setup](#environment-setup)\n - [Development Workflow](#development-workflow)\n - [Branch Strategy](#branch-strategy)\n - [Component Modifications](#component-modifications)\n - [Testing Changes](#testing-changes)\n - [Code Style](#code-style)\n - [Building](#building)\n - [Submitting Issues](#submitting-issues)\n - [Submitting Pull Requests](#submitting-pull-requests)\n\n## Code of Conduct\n\nPlease read our [Contributor Code of Conduct](./CODE_OF_CONDUCT.md) for information on our rules of conduct. By contributing to Ionicons, you agree to abide by its terms.\n\n## Getting Started\n\n### Prerequisites\n\n- [Node.js](https://nodejs.org/) (LTS version recommended)\n- [npm](https://www.npmjs.com/) (comes with Node.js)\n- Git\n\n### Environment Setup\n\n1. We recommend using [nvm](https://github.com/nvm-sh/nvm) (Node Version Manager) to manage Node.js versions:\n - For macOS/Linux: `curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash`\n - For Windows: Use [nvm-windows](https://github.com/coreybutler/nvm-windows)\n - Install and use the LTS version: `nvm install --lts && nvm use --lts`\n\n Alternatively, you can [download the installer](https://nodejs.org/) for the LTS version of Node.js directly.\n\n2. Fork the repository on GitHub\n3. Clone your fork locally:\n ```bash\n git clone https://github.com/YOUR-USERNAME/ionicons.git\n cd ionicons\n ```\n4. Add the original repository as an upstream remote:\n ```bash\n git remote add upstream https://github.com/ionic-team/ionicons.git\n ```\n5. Create a new branch from `main` for your change:\n ```bash\n git checkout -b your-feature-branch\n ```\n6. Install dependencies:\n ```bash\n npm install\n ```\n7. Run the initial build:\n ```bash\n npm run build\n ```\n8. If desired, [modify the Icon Component](#component-modifications)\n9. Or, modify and preview the site\n\n## Development Workflow\n\n### Branch Strategy\n\n- Always create a new branch from `main` for your changes:\n ```bash\n git checkout main\n git pull upstream main\n git checkout -b your-feature-branch\n ```\n\n### Component Modifications\n\nIf you're modifying the `ion-icon` component:\n\n1. Navigate to `src/components/` directory and open the `icon` component to modify\n2. Make your changes to the component code\n3. Test your changes (see [Testing Changes](#testing-changes))\n\n### Testing Changes\n\nTo preview component changes:\n\n1. Run:\n ```bash\n npm start\n ```\n This will start a local version of the icon test with a test page\n \n2. Modify the test page in `index.html` as needed to test your changes\n3. If you are modifying icons, you can run `npm run build.files` to re-run the SVG optimization script to verify there are no changes after optimizing the SVG\n\n### Code Style\n\n- This project uses Prettier for code formatting\n- Run `npm run prettier` to format your code before submitting\n\n### Building\n\n- Run `npm run build` to build the complete package\n- Run `npm run build.files` to rebuild only the SVG icon files\n\n## Submitting Issues\n\nPlease submit issues for:\n- Bug reports\n- Feature requests\n- General questions about the project\n\nWhen creating issues:\n\n1. If you have a question about using Ionicons, please ask on the [Ionic Forum](http://forum.ionicframework.com/) or in the [Ionic Discord](https://ionic.link/discord).\n\n2. It is required that you clearly describe the steps necessary to reproduce the issue you are running into. Although we would love to help our users as much as possible, diagnosing issues without clear reproduction steps is extremely time-consuming and simply not sustainable.\n\n3. The issue list of this repository is exclusively for bug reports and feature requests. Non-conforming issues will be closed immediately.\n\n4. Check if a similar issue already exists by searching through [existing issues](https://github.com/ionic-team/ionicons/issues?utf8=%E2%9C%93&q=is%3Aissue). You can search through existing issues to see if there is a similar one reported. Include closed issues as it may have been closed with a solution.\n\n5. Use the provided issue templates and clearly describe:\n - Expected behavior\n - Actual behavior\n - Steps to reproduce (for bugs)\n - Browser/device information when relevant\n\n6. [Create a new issue](https://github.com/ionic-team/ionicons/issues/new/choose) that thoroughly explains the problem.\n\n## Submitting Pull Requests\n\n1. Before submitting a Pull Request (PR), please:\n - Create an issue first to discuss the proposed changes\n - Comment on an existing issue mentioning you'd like to work on it\n - Look for issues labeled with [`help wanted`](https://github.com/ionic-team/ionicons/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22) if you're new to the project\n\n2. Creating the PR:\n - Update your fork to the latest upstream main\n - Make your changes in a new git branch\n - Follow the code style of the project\n - Include relevant tests\n - Make sure all tests pass: `npm test`\n - Update documentation if needed\n - [Create a new pull request](https://github.com/ionic-team/ionicons/compare) with the `main` branch as the base."
},
{
"path": "LICENSE",
"content": "The MIT License (MIT)\n\nCopyright (c) 2015-present Ionic (http://ionic.io/)\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in\nall copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\nTHE SOFTWARE.\n"
},
{
"path": "jest.config.mjs",
"content": "import path from 'path';\nimport url from 'url';\n\nimport { createJestStencilPreset } from 'jest-stencil-runner';\n\nconst __dirname = path.dirname(url.fileURLToPath(import.meta.url));\n\nexport default createJestStencilPreset({\n rootDir: __dirname, \n // Add any additional Jest configuration here\n collectCoverageFrom: [\n 'src/**/*.{ts,tsx}',\n '!src/**/*.d.ts',\n ],\n testMatch: [\n '**/__tests__/**/*.(ts|tsx|js)',\n '**/*.(test|spec).(ts|tsx|js)'\n ]\n});"
},
{
"path": "package.json",
"content": "{\n \"name\": \"ionicons\",\n \"version\": \"8.0.13\",\n \"description\": \"Premium icons for Ionic.\",\n \"files\": [\n \"components/\",\n \"dist/\",\n \"icons/\"\n ],\n \"main\": \"./dist/index.cjs.js\",\n \"module\": \"./dist/index.js\",\n \"types\": \"dist/types/index.d.ts\",\n \"unpkg\": \"dist/ionicons/ionicons.esm.js\",\n \"jsdelivr\": \"dist/ionicons/ionicons.esm.js\",\n \"collection\": \"dist/collection/collection-manifest.json\",\n \"collection:main\": \"dist/collection/index.js\",\n \"exports\": {\n \".\": {\n \"types\": \"./dist/types/index.d.ts\",\n \"import\": \"./dist/index.js\",\n \"require\": \"./dist/index.cjs.js\"\n },\n \"./loader\": {\n \"types\": \"./dist/loader/index.d.ts\",\n \"import\": \"./dist/loader/index.js\",\n \"require\": \"./dist/loader/index.cjs.js\"\n },\n \"./components\": {\n \"types\": \"./components/index.d.ts\",\n \"import\": \"./components/index.js\"\n },\n \"./components/ion-icon.js\": {\n \"types\": \"./components/ion-icon.d.ts\",\n \"import\": \"./components/ion-icon.js\"\n },\n \"./icons\": {\n \"types\": \"./icons/index.d.ts\",\n \"import\": \"./icons/index.mjs\",\n \"require\": \"./icons/index.js\"\n },\n \"./dist/ionicons.json\": {\n \"default\": \"./dist/ionicons.json\"\n }\n },\n \"scripts\": {\n \"build\": \"run-s clean build.* prettier\",\n \"build.files\": \"tsx scripts/build.ts\",\n \"build.component\": \"stencil build\",\n \"build.collection\": \"tsx scripts/collection-copy.ts\",\n \"clean\": \"rimraf dist components icons www\",\n \"prettier\": \"npm run prettier.base -- --write\",\n \"prettier.base\": \"prettier --cache \\\"./({bin,scripts,src,test}/**/*.{ts,tsx,js,jsx})|bin/stencil|.github/(**/)?*.(yml|yaml)|*.js\\\"\",\n \"prettier.dry-run\": \"npm run prettier.base -- --list-different\",\n \"start\": \"run-s build.files start.stencil\",\n \"start.stencil\": \"stencil build --dev --watch --serve\",\n \"test\": \"run-s test.spec\",\n \"test.spec\": \"jest\",\n \"test.e2e\": \"playwright test\",\n \"test.e2e.install\": \"playwright install && playwright install-deps\"\n },\n \"dependencies\": {\n \"@stencil/core\": \"^4.35.3\"\n },\n \"devDependencies\": {\n \"@playwright/test\": \"^1.53.2\",\n \"@types/fs-extra\": \"^11.0.4\",\n \"@types/jest\": \"^30.0.0\",\n \"@types/node\": \"^22.15.3\",\n \"@types/svgo\": \"^3.0.0\",\n \"fs-extra\": \"^11.3.0\",\n \"jest\": \"^30.0.4\",\n \"jest-cli\": \"^30.0.4\",\n \"jest-stencil-runner\": \"^0.0.8\",\n \"npm-run-all2\": \"^8.0.4\",\n \"prettier\": \"^3.6.2\",\n \"puppeteer\": \"^24.12.0\",\n \"rimraf\": \"^6.0.1\",\n \"semver\": \"^7.7.2\",\n \"serve\": \"^14.2.4\",\n \"svgo\": \"4.0.0\",\n \"tsx\": \"^4.20.3\",\n \"typescript\": \"^5.8.3\"\n },\n \"keywords\": [\n \"icon pack\",\n \"ionic\",\n \"icon\",\n \"svg\",\n \"mobile\",\n \"web component\",\n \"component\",\n \"custom element\",\n \"material design\",\n \"ios\"\n ],\n \"homepage\": \"http://ionicons.com/\",\n \"author\": {\n \"name\": \"Ben Sperry\",\n \"web\": \"https://twitter.com/benjsperry\"\n },\n \"contributors\": [\n {\n \"name\": \"Adam Bradley\",\n \"web\": \"http://twitter.com/adamdbradley\"\n }\n ],\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/ionic-team/ionicons.git\"\n },\n \"bugs\": {\n \"url\": \"https://github.com/ionic-team/ionicons/issues\"\n },\n \"license\": \"MIT\",\n \"sideEffects\": [\n \"icons/imports/\"\n ],\n \"web-types\": \"dist/ionic.web-types.json\"\n}\n"
},
{
"path": "playwright.config.ts",
"content": "import type { PlaywrightTestConfig } from '@playwright/test';\nimport { devices, expect } from '@playwright/test';\n\nconst projects: PlaywrightTestConfig['projects'] = [\n {\n /**\n * This is really just desktop Firefox\n * but with a mobile viewport.\n */\n name: 'Mobile Firefox',\n use: {\n browserName: 'firefox',\n /**\n * This is the Pixel 5 configuration.\n * We can't use devices['Pixel 5']\n * because the \"isMobile\" option is\n * not supported on Firefox.\n */\n viewport: {\n width: 393,\n height: 727\n }\n },\n },\n {\n name: 'Mobile Chrome',\n use: {\n browserName: 'chromium',\n ...devices['Pixel 5']\n }\n },\n {\n name: 'Mobile Safari',\n use: {\n browserName: 'webkit',\n ...devices['iPhone 12']\n }\n }\n];\n\n/**\n * See https://playwright.dev/docs/test-configuration.\n */\nconst config: PlaywrightTestConfig = {\n testMatch: '*.e2e.ts',\n expect: {\n /**\n * Maximum time expect() should wait for the condition to be met.\n * For example in `await expect(locator).toHaveText();`\n */\n timeout: 5000,\n \n /**\n * Configure screenshot comparison settings\n * to be more tolerant of minor visual differences\n */\n toHaveScreenshot: {\n // Increase the threshold to allow for small font rendering differences\n // This sets the maximum allowed ratio of pixels that can be different\n maxDiffPixelRatio: 0.02, // Allow up to 2% of pixels to be different\n \n // Alternatively, you can use absolute pixel count\n // maxDiffPixels: 100, // Allow up to 100 pixels to be different\n \n // Add a threshold for per-pixel difference to handle anti-aliasing\n threshold: 0.2, // Default is 0.1\n }\n },\n /* Fail the build on CI if you accidentally left test.only in the source code. */\n forbidOnly: !!process.env.CI,\n retries: process.env.CI ? 2 : 0,\n /* Opt out of parallel tests on CI. */\n workers: process.env.CI ? 1 : undefined,\n /* Reporter to use. See https://playwright.dev/docs/test-reporters */\n reporter: 'html',\n /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */\n use: {\n /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */\n actionTimeout: 0,\n /* Base URL to use in actions like `await page.goto('/')`. */\n // baseURL: 'http://localhost:3000',\n\n /**\n * All failed tests should create\n * a trace file for easier debugging.\n *\n * See https://playwright.dev/docs/trace-viewer\n */\n trace: 'retain-on-failure',\n baseURL: 'http://localhost:3333',\n },\n\n /* Configure projects for major browsers */\n projects,\n webServer: {\n command: 'serve www -p 3333',\n port: 3333,\n reuseExistingServer: !process.env.CI\n }\n};\n\nexport default config;"
},
{
"path": "readme.md",
"content": "# Ionicons\n\n[Ionicons](http://ionicons.com/) is a completely open-source icon set with 1,300 icons crafted for web, iOS, Android, and desktop apps. Ionicons was built for [Ionic Framework](https://ionicframework.com/), so icons have both Material Design and iOS versions.\n\nNote: All brand icons are trademarks of their respective owners. The use of these trademarks does not indicate endorsement of the trademark holder by Ionic, nor vice versa.\n\nWe intend for this icon pack to be used with [Ionic](http://ionicframework.com/), but itβs by no means limited to it. Use them wherever you see fit, personal or commercial. They are free to use and licensed under [MIT](http://opensource.org/licenses/MIT).\n\n\n## Contributing\n\nThanks for your interest in contributing! Read up on our guidelines for\n[contributing](https://github.com/ionic-team/ionicons/blob/main/CONTRIBUTING.md)\nand then look through our issues with a [help wanted](https://github.com/ionic-team/ionicons/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22)\nlabel.\n\n\n## Using the Web Component\n\nThe Ionicons Web Component is an easy and performant way to use Ionicons in your app. The component will dynamically load an SVG for each icon, so your app is only requesting the icons that you need.\n\nAlso note that only visible icons are loaded, and icons that are \"below the fold\" and hidden from the user's view do not make fetch requests for the svg resource.\n\n### Installation\n\nIf you're using [Ionic Framework](https://ionicframework.com/), Ionicons is packaged by default, so no installation is necessary. Want to use Ionicons without Ionic Framework? Place the following `\n\n```\n\nyou can replace `latest` to pick any version of Ionicon, e.g.:\n\n```html\n\n\n```\n\n### Basic usage\n\nTo use a built-in icon from the Ionicons package, populate the `name` attribute on the ion-icon component:\n\n```html\n\n```\n\n### Custom icons\n\nTo use a custom SVG, provide its url in the `src` attribute to request the external SVG file. The `src` attribute works the same as `` in that the url must be accessible from the webpage that's making a request for the image. Additionally, the external file can only be a valid svg and does not allow scripts or events within the svg element.\n\n```html\n\n```\n\n#### Custom Asset Path\n\nIf you have a different set of icons you would like to load or if the Ionicon icons are hosted on a different page or path, you can set the asset url from which Ionicons pulls the icons via:\n\n```ts\nimport { setAssetPath, addIcons } from 'ionicons';\nimport { add, logoIonic, save } from 'ionicons/icons';\n\n// set root path for loading icons to \"/public/svg\"\nsetAssetPath(`${window.location.origin}/public/svg/`);\n\n// only load specific icons\naddIcons({ add, logoIonic, save });\n```\n\nThis allows the use of named icons like this:\n\n```html\n\n\n```\n\n## Variants\nEach app icon in Ionicons has a `filled`, `outline` and `sharp` variant. These different variants are provided to make your app feel native to a variety of platforms. The filled variant uses the default name without a suffix. Note: Logo icons do not have outline or sharp variants.\n\n```html\n \n \n \n```\n\n### Platform specificity\nWhen using icons in Ionic Framework you can specify different icons per platform. Use the `md` and `ios` attributes and provide the platform-specific icon/variant name.\n\n```html\n\n```\n\n## Size\n\nTo specify the icon size, you can use the size attribute for our pre-defined font sizes.\n\n```html\n\n\n```\n\nOr you can set a specific size by applying the `font-size` CSS property on the `ion-icon` component. It's recommended to use pixel sizes that are a multiple of 8 (8, 16, 32, 64, etc.)\n\n```css\nion-icon {\n font-size: 64px;\n}\n```\n\n## Color\n\nSpecify the icon color by applying the `color` CSS property on the `ion-icon` component.\n\n```css\nion-icon {\n color: blue;\n}\n```\n\n## Stroke width\nWhen using an `outline` icon variant it is possible to adjust the stroke width, for improved visual balance relative to the icon's size or relative to the width of adjacent text. You can set a specific size by applying the `--ionicon-stroke-width` CSS custom property to the `ion-icon` component. The default value is 32px.\n\n```html\n\n```\n\n```css\nion-icon {\n --ionicon-stroke-width: 16px;\n}\n```\n\n## Migrating from v4\n\nSee the [5.0 release notes](https://github.com/ionic-team/ionicons/releases/tag/5.0.0) for a list of icon deletions/renames.\n\n## License\n\nIonicons is licensed under the [MIT license](http://opensource.org/licenses/MIT).\n\n\n## Related\n\n* [Ionicons Homepage](http://ionicons.com/)\n* [Ionic Framework](https://ionicframework.com/)\n* [Ionic Discord](https://ionic.link/discord)\n* [Ionic Forum](https://forum.ionicframework.com/)\n* [Stencil](https://stenciljs.com/)\n* [Capacitor](https://capacitorjs.com/)\n"
},
{
"path": "scripts/build.ts",
"content": "import path from 'node:path';\n\nimport fs from 'fs-extra';\nimport { optimize } from 'svgo';\n\nimport { webComponentPassPlugins, sourcePassPlugins } from './plugins';\nimport { reservedKeywords } from './constants';\nimport pkgData from '../package.json' with { type: 'json' };\nimport type { SvgData } from './types';\n\nasync function build(rootDir: string) {\n try {\n const srcDir = path.join(rootDir, 'src');\n const srcSvgDir = path.join(srcDir, 'svg');\n const iconDir = path.join(rootDir, 'icons');\n const distDir = path.join(rootDir, 'dist');\n const distIoniconsDir = path.join(distDir, 'ionicons');\n const distSvgDir = path.join(distDir, 'svg');\n const optimizedSvgDir = path.join(distIoniconsDir, 'svg');\n\n /**\n * Create the directories first, then empty them\n * This ensures they exist before we try to write files to them\n */\n await Promise.all([\n fs.ensureDir(iconDir),\n fs.ensureDir(distDir),\n fs.ensureDir(distSvgDir),\n fs.ensureDir(optimizedSvgDir),\n fs.ensureDir(distIoniconsDir),\n ]);\n\n /**\n * Empty the directories\n */\n await Promise.all([\n fs.emptyDir(iconDir),\n fs.emptyDir(distDir),\n fs.emptyDir(distSvgDir),\n fs.emptyDir(optimizedSvgDir),\n fs.emptyDir(distIoniconsDir),\n ]);\n\n const version = pkgData.version as string;\n const srcSvgData = await getSvgs(srcSvgDir, distSvgDir, optimizedSvgDir);\n await optimizeSvgs(srcSvgData);\n await Promise.all([\n createDataJson(version, srcDir, distDir, srcSvgData),\n createIconPackage(version, iconDir, srcSvgData),\n ]);\n\n const svgSymbolsContent = await createSvgSymbols(version, distDir, srcSvgData);\n\n await createCheatsheet(version, rootDir, distDir, svgSymbolsContent, srcSvgData);\n await createWebTypes(version, rootDir, distDir, srcSvgData);\n await copyToTesting(rootDir, distDir, srcSvgData);\n } catch (e) {\n console.error(e);\n process.exit(1);\n }\n}\n\nasync function optimizeSvgs(srcSvgData: SvgData[]) {\n await Promise.all(\n srcSvgData.map(async (svgData) => {\n return optimizeSvg(svgData);\n }),\n );\n}\n\nasync function optimizeSvg(svgData: SvgData) {\n const srcSvgContent = await fs.readFile(svgData.srcFilePath, 'utf8');\n\n const optimizedSvg = await optimize(srcSvgContent, { path: svgData.srcFilePath });\n const webComponentSvg = await optimize(optimizedSvg.data, {\n path: svgData.srcFilePath,\n plugins: webComponentPassPlugins,\n });\n const sourceSvg = await optimize(optimizedSvg.data, {\n path: svgData.srcFilePath,\n plugins: sourcePassPlugins,\n });\n\n // Ensure directories exist before writing files\n await Promise.all([\n fs.ensureDir(path.dirname(svgData.optimizedFilePath)),\n fs.ensureDir(path.dirname(svgData.distSvgFilePath)),\n ]);\n\n svgData.optimizedSvgContent = webComponentSvg.data;\n await Promise.all([\n fs.writeFile(svgData.optimizedFilePath, svgData.optimizedSvgContent),\n fs.writeFile(svgData.distSvgFilePath, sourceSvg.data),\n ]);\n}\n\nasync function copyToTesting(rootDir: string, distDir: string, srcSvgData: SvgData[]) {\n const testDir = path.join(rootDir, 'www');\n const testBuildDir = path.join(testDir, 'build');\n const testSvgDir = path.join(testBuildDir, 'svg');\n\n // Ensure all directories exist\n await Promise.all([fs.ensureDir(testDir), fs.ensureDir(testBuildDir), fs.ensureDir(testSvgDir)]);\n\n await Promise.all(\n srcSvgData\n .filter((svgData): svgData is SvgData & { optimizedSvgContent: string } => Boolean(svgData.optimizedSvgContent))\n .map(async (svgData) => {\n const testSvgFilePath = path.join(testSvgDir, svgData.fileName);\n await fs.writeFile(testSvgFilePath, svgData.optimizedSvgContent);\n }),\n );\n\n const distCheatsheetFilePath = path.join(distDir, 'cheatsheet.html');\n const testCheatsheetFilePath = path.join(testDir, 'cheatsheet.html');\n await fs.copyFile(distCheatsheetFilePath, testCheatsheetFilePath);\n}\n\nasync function createSvgSymbols(version: string, distDir: string, srcSvgData: SvgData[]) {\n srcSvgData = srcSvgData.sort((a, b) => {\n if (a.iconName < b.iconName) return -1;\n if (a.iconName > b.iconName) return 1;\n return 0;\n });\n\n const symbolsSvgFilePath = path.join(distDir, 'ionicons.symbols.svg');\n\n const lines = [\n `\">\n \n\n Watch\">\n \n\n\n