Svelte Integration

Welcome to the Svelte integration guide for Lineicons V5! Here you will find all the instructions on how to add the Lineicons icon library to your Svelte projects.

Lineicons V5 allows you to seamlessly integrate scalable and customizable icons in any Svelte project. In this section, we will share how easily you can install, implement, and integrate Lineicons icons into your Svelte websites or applications.

How to Integrate Lineicons with Svelte Projects

Lineicons integrates with any Svelte project effortlessly. You can integrate the icon library in two ways. You can either use the CDN link or install the package via NPM.

Using NPM

Step-1: Install Lineicons via the NPM package.

npm install lineicons

yarn add lineicons

Step-2: Once the installation is done, you have to add the CSS file to the project.

<link rel="stylesheet" href="./node_modules/lineicons/web-font/lineicons.css" />

Step-3: Now check out the icons page, select the icon you need, and copy the code or download the icon as a Svelte component.

Step-4: Paste the code and add the icon to your website.

<svg
  width="80"
  height="80"
  viewBox="0 0 24 24"
  fill="#343C54"
  xmlns="http://www.w3.org/2000/svg"
  transform="rotate(0 0 0)"
>
  <path
    fill-rule="evenodd"
    clip-rule="evenodd"
    d="M12 3.75C12.2163 3.75 12.4221 3.84339 12.5645 4.00621L16.7116 8.74719L20.775 5.42099C21.0116 5.22731 21.342 5.19665 21.6102 5.3435C21.8784 5.49035 22.0306 5.78531 21.9949 6.08898L20.6507 17.5129C20.5174 18.646 19.5571 19.5 18.4162 19.5H5.58388C4.44295 19.5 3.48261 18.646 3.34929 17.5129L2.00516 6.08898C1.96943 5.78531 2.12162 5.49035 2.38981 5.3435C2.658 5.19665 2.98849 5.22731 3.22509 5.42099L7.28842 8.74719L11.4355 4.00621C11.5779 3.84339 11.7837 3.75 12 3.75ZM12 5.63914L7.93953 10.2811C7.6731 10.5857 7.21308 10.624 6.89995 10.3677L3.71188 7.75795L4.46183 14.1319H19.5382L20.2882 7.75795L17.1001 10.3677C16.787 10.624 16.3269 10.5857 16.0605 10.2811L12 5.63914ZM19.3617 15.6319H4.63832L4.83902 17.3376C4.88346 17.7153 5.20357 18 5.58388 18H18.4162C18.7965 18 19.1166 17.7153 19.161 17.3376L19.3617 15.6319Z"
    fill="#343C54"
  />
</svg>

How to use Lineicons in Svelte

Using the Lineicons icon library is super easy and simple:

Select icons and copy-paste: Simply go through the icons page (opens in a new tab), and search for the icon you want on the search bar. Select the icon and copy-paste the code in your project.
Adjust to your style: You can customize the size, color, and rotation of the icon to fit your design.
Save the file and look over: Save the file and check the preview in a new web browser.

Example

In this example, we will find a File format icon to add to your Svelte project.

Search for the “File format” icon: Browse the Lineicons icons page (opens in a new tab), use the search bar to search for the File format icon. Select the icon you want to add to your website.
Choose your preferred installation method: Select the installation method and add the icon library to your Svelte projects.
Customize the icon: Adjust the color, icon size, and rotation to meet your project and design needs.
Copy-paste the code snippet: After that, just copy and paste the code snippet into your project.

<svg
  width="80"
  height="80"
  viewBox="0 0 24 24"
  fill="#343C54"
  xmlns="http://www.w3.org/2000/svg"
  transform="rotate(0 0 0)"
>
  <path
    d="M18.0792 15.1059C18.2283 15.1059 18.3472 15.0676 18.4359 14.991C18.5286 14.9104 18.575 14.8056 18.575 14.6766C18.575 14.5436 18.5286 14.4368 18.4359 14.3561C18.3472 14.2755 18.2283 14.2352 18.0792 14.2352H17.5713C17.5511 14.2352 17.541 14.2453 17.541 14.2654V15.0757C17.541 15.0958 17.5511 15.1059 17.5713 15.1059H18.0792Z"
    fill="#343C54"
  />
  <path
    fill-rule="evenodd"
    clip-rule="evenodd"
    d="M17.25 22C18.4926 22 19.5 20.9926 19.5 19.75V19.0058H20.5C21.3284 19.0058 22 18.3342 22 17.5058V13.25C22 12.4216 21.3284 11.75 20.5 11.75H10.5C9.67157 11.75 9 12.4216 9 13.25V17.5058C9 18.3342 9.67157 19.0058 10.5 19.0058H18V19.75C18 20.1642 17.6642 20.5 17.25 20.5H6.75C6.33579 20.5 6 20.1642 6 19.75V9.75H10.0009C11.2442 9.75 12.2518 8.74166 12.2509 7.4984L12.248 3.5H17.25C17.6642 3.5 18 3.83579 18 4.25V11.7383H19.5V4.25C19.5 3.00736 18.4926 2 17.25 2H12.1177C11.5207 2 10.9482 2.23725 10.5262 2.65951L5.15851 8.03055C4.73686 8.45247 4.5 9.02455 4.5 9.62105V19.75C4.5 20.9926 5.50736 22 6.75 22H17.25ZM10.7488 4.55876L7.05986 8.25H10.0009C10.4153 8.25 10.7512 7.91389 10.7509 7.49947L10.7488 4.55876ZM18.2666 13.2617C18.5528 13.2617 18.8048 13.3202 19.0224 13.4371C19.2401 13.5499 19.4074 13.7132 19.5243 13.9268C19.6452 14.1364 19.7057 14.3783 19.7057 14.6524C19.7057 14.9225 19.6432 15.1603 19.5183 15.3659C19.3933 15.5715 19.2179 15.7307 18.9922 15.8436C18.7665 15.9564 18.5065 16.0129 18.2122 16.0129H17.5713C17.5511 16.0129 17.541 16.023 17.541 16.0431V17.4036C17.541 17.4318 17.533 17.454 17.5169 17.4701C17.5007 17.4862 17.4786 17.4943 17.4503 17.4943H16.495C16.4668 17.4943 16.4446 17.4862 16.4285 17.4701C16.4124 17.454 16.4043 17.4318 16.4043 17.4036V13.3524C16.4043 13.3242 16.4124 13.302 16.4285 13.2859C16.4446 13.2698 16.4668 13.2617 16.495 13.2617H18.2666ZM14.8405 17.4701C14.8566 17.4862 14.8787 17.4943 14.907 17.4943H15.8623C15.8905 17.4943 15.9127 17.4862 15.9288 17.4701C15.945 17.454 15.953 17.4318 15.953 17.4036V13.3524C15.953 13.3242 15.945 13.302 15.9288 13.2859C15.9127 13.2698 15.8905 13.2617 15.8623 13.2617H14.907C14.8787 13.2617 14.8566 13.2698 14.8405 13.2859C14.8243 13.302 14.8163 13.3242 14.8163 13.3524V17.4036C14.8163 17.4318 14.8243 17.454 14.8405 17.4701ZM11.4208 17.4943C11.3926 17.4943 11.3704 17.4862 11.3543 17.4701C11.3381 17.454 11.3301 17.4318 11.3301 17.4036V16.5268C11.3301 16.4865 11.3442 16.4502 11.3724 16.418L13.1319 14.2715C13.14 14.2634 13.142 14.2554 13.138 14.2473C13.134 14.2392 13.1259 14.2352 13.1138 14.2352H11.4208C11.3926 14.2352 11.3704 14.2271 11.3543 14.211C11.3381 14.1949 11.3301 14.1727 11.3301 14.1445V13.3524C11.3301 13.3242 11.3381 13.302 11.3543 13.2859C11.3704 13.2698 11.3926 13.2617 11.4208 13.2617H14.3291C14.3574 13.2617 14.3795 13.2698 14.3957 13.2859C14.4118 13.302 14.4198 13.3242 14.4198 13.3524V14.2231C14.4198 14.2715 14.4057 14.3098 14.3775 14.338L12.6059 16.4845C12.5978 16.4926 12.5958 16.5006 12.5998 16.5087C12.6039 16.5168 12.6119 16.5208 12.624 16.5208H14.3291C14.3574 16.5208 14.3795 16.5289 14.3957 16.545C14.4118 16.5611 14.4198 16.5833 14.4198 16.6115V17.4036C14.4198 17.4318 14.4118 17.454 14.3957 17.4701C14.3795 17.4862 14.3574 17.4943 14.3291 17.4943H11.4208Z"
    fill="#343C54"
  />
</svg>

Vue Integration Figma Integration