Ionic Packages & CDN
Ionic Framework offers npm packages for Angular, React, Vue, and JavaScript, plus CDN links for quick prototyping. Choose your framework below to get started, or use the CDN to test Ionic Framework components in the browser.
Ionic Angular
Start a new Ionic Angular app or add Ionic to your existing Angular project.
Create a new Ionic Angular app using the Ionic CLI.
Add Ionic Angular to an existing Angular project.
Ionic React
Start a new Ionic React app or add Ionic to your existing React project.
Create a new Ionic React app using the Ionic CLI.
Add Ionic React to an existing React project.
Ionic Vue
Start a new Ionic Vue app or add Ionic to your existing Vue project.
Create a new Ionic Vue app using the Ionic CLI.
Add Ionic Vue to an existing Vue project.
Ionic JavaScript
Start a new Ionic JavaScript app.
Create a new Ionic JavaScript app using Vite.
Ionic Framework CDN
Ionic Framework can be included from a CDN for quick testing in a StackBlitz, Plunker, Codepen, or any other online code editor!
It's recommended to use jsdelivr to access the Framework from a CDN. To get the latest version, add the following inside the <head> element in an HTML file, or where external assets are included in the online code editor:
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css" />
With this it's possible to use all of the Ionic Framework core components without having to install a framework. The CSS bundle will include all of the Ionic Global Stylesheets.
Ionicons CDN
Ionicons is packaged by default with the Ionic Framework, so no installation is necessary if you're using Ionic. To use Ionicons without Ionic Framework, place the following <script> near the end of your page, right before the closing </body> tag.
<script type="module" src="https://cdn.jsdelivr.net/npm/ionicons/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/npm/ionicons/dist/ionicons/ionicons.js"></script>
For more information on using Ionicons, visit the Ionicons documentation.