Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit

Bumps [typescript]( from 4.9.5 to 5.0.4.
- [Release notes](
- [Commits](microsoft/TypeScript@v4.9.5...v5.0.4)

- dependency-name: typescript
  dependency-type: direct:development
  update-type: version-update:semver-major

Signed-off-by: dependabot[bot] <>

Git stats


Failed to load latest commit information.


GitHub Workflow Status Sonar Quality Gate Sonar Coverage npm bundlephobia PRs Welcome

Awesome SVG icon component for Svelte JS, built with Font Awesome icons. Based on Justineo/vue-awesome

Svelte-Awesome supports Font-Awesome v4.7.0 (icons inbuilt) and v5/v6 (via @fortawesome npm packages)

A demo is available here

A list of all available embedded icons is available here



npm install --save svelte-awesome


<!-- basic -->
<Icon data="{beer}" />
<!-- codeFork is camelCase, unlike the js file, code-fork.js -->
<Icon data="{codeFork}" />

<!-- with options -->
<Icon data="{refresh}" scale="2" />
<Icon data="{comment}" flip="horizontal" />
<Icon data="{codeFork}" label="Forked Repository" />

<!-- stacked icons [WIP] -->
<Icon label="No Photos">
  <Icon data="{camera}" />
  <Icon name="{ban}" scale="2" class="alert" />

<!-- FontAwesome v5 and v6 Icons supported -->
<Icon data="{faThumbsUp}" />

  import Icon from 'svelte-awesome';

  /// *** Embedded Icons ***
  // Recommended - import just the icon you need
  import beer from 'svelte-awesome/icons/beer';
  import refresh from 'svelte-awesome/icons/refresh';
  import codeFork from 'svelte-awesome/icons/codeFork';
  import camera from 'svelte-awesome/icons/camera';
  import ban from 'svelte-awesome/icons/ban';
  // Not recommended as it will download all of the icons in dev mode
  import { ban } from 'svelte-awesome/icons';

  // EDGECASE ICONS - different names due to reserved names / starting with numbers
  import fa500px from 'svelte-awesome/icons/fa500px'; // '500px' icon
  import faTry from 'svelte-awesome/icons/faTry'; // 'try' icon

  /// *** @fortawesome/* Icons ***
  // Recommended - import the individual icon a little like with the recommended embedded icons approach above
  import { faThumbsUp } from '@fortawesome/free-regular-svg-icons/faThumbsUp';
  // Not Recommended - import the individual icon from the main file - it will download all of the icons in dev mode
  import { faThumbsUp } from '@fortawesome/free-regular-svg-icons';

Sapper Usage

For Sapper, you may need to import the Icon component explicitly as below:

import Icon from 'svelte-awesome/components/Icon.svelte';