icons8 / line-awesome

Replace Font Awesome with modern line icons

Icons8 Line Awesome

Line Awesome is a free alternative for Font Awesome 5.11.2. It consists of ~1380 flat icons that offer complete coverage of the main Font Awesome icon set.

This icon-font is based off of the Icons8 Windows 10 style, which consists of over 4,000 icons, so be sure to check that out if you need more specific icons.

Check out a live preview of the Line Awesome.

Installing

Line Awesome can be loaded via CDN or downloaded as zip archive. You can read more about this options on Line Awesome how-to page.

Alternatively, Line Awesome can be installed as npm package:

npm install line-awesome

Usage

Icon can have 3 styles: regular, solid or brand. For each style there is a corresponding class: lar, las or lab. Wherever you desire to place an icon simply insert the following code and change the class names (laX la-XXX) to correspond to the icon of your choice.

<i class="las la-battery-three-quarters"></i>

You can change the size of the icons using one of the following classes:

• la-lg
• la-xs
• la-sm
• la-lx
• la-1x
• la-2x
• la-3x
• la-4x
• la-5x
• la-6x
• la-7x
• la-8x
• la-9x
• la-10x
• la-fw

You can find a usage example for each icon on the Line Awesome page. Feel free to use this page to quickly find desired icons.

Using in Figma, Sketch, Photoshop, etc.

To use Line Awesome in your favorite design tool just import desired fonts to your project and you are ready to go! Note: there are 3 files, one for each style (regular, solid, brands). If you want to use all icons please import all 3 files.

Good Boy License

We’ve released the icon pack either under MIT or the Good Boy License. We invented it. Please do whatever your mom would approve of:

• Download
• Change
• Fork

No tattoos!

Credits

Based on the Windows 10 icon pack. The original ones contains 4,500 icons and is too heavy for a single font.

Questions or Ideas?

If you have any questions or ideas about icons, please feel free to contact us.

line-awesome's Issues

Line Awesome is now included in Quasar Framework & QIconPicker

This is not a change request ... Just a friendly heads up that I submitted a feature request to Quasar framework to include Line Awesome among it's pre-configured Icon sets which they've kindly released in Quasar v1.8.0 this week. It's also now included in QIconPicker a Quasar app extension.

Quasar's QIcon component has a rich set of icon features that includes a new cool new trick that supports webpack tree shaking of iconsets so just the icons in used by an application are added to the app build avoiding a full web font download. They also support icon mapping.

Thanks enormously for releasing Line Awesome and I hope this framework addition will find you new supporters and other linkages to Icons8 products. I don't represent the Quasar Framework team in any way. Honestly ... No tats or drugs here dude 😁 and ... seriously FA's otter icon just does not compare.

Error on committing changes

Hi @m5o
When commit, I get the following error:

git -c diff.mnemonicprefix=false -c core.quotepath=false -c credential.helper=sourcetree push -v --tags --set-upstream origin refs/heads/fix-wrong-icons:refs/heads/fix-wrong-icons
Pushing to https://github.com/icons8/line-awesome
remote: Permission to icons8/line-awesome.git denied to fitodac.
fatal: unable to access 'https://github.com/icons8/line-awesome/': The requested URL returned error: 403
Completed with errors, see above

Could you help me with this?
Thanks

Missing "la" CSS rules for many brand icons

Hello,

I'm using Line Awesome via NPM and without Font Awesome.
It looks, like there are some "la" rules missing for brand icons (some have these rules)

I.e.

<i class="la la-battle-net"></i>

won't work.

If this is intended, than it would be great to have some json containing a list and category of all icons within the dist. As of now, someone has to exactly know, what is there.

Keep a Changelog

Here is a list of all the icons removed from 1.1.0 -> 1.2.1 (to help others fix their applications broken by this release)

fa-area-chart
fa-arrow-circle-o-down
fa-arrow-circle-o-left
fa-arrow-circle-o-right
fa-arrow-circle-o-up
fa-arrows-h
fa-arrows-v
fa-arrows
fa-automobile
fa-bank
fa-bar-chart-o
fa-bar-chart
fa-battery-0
fa-battery-1
fa-battery-2
fa-battery-3
fa-battery-4
fa-bell-o
fa-bell-slash-o
fa-bitbucket-square
fa-bookmark-o
fa-building-o
fa-cab
fa-calendar-check-o
fa-calendar-minus-o
fa-calendar-o
fa-calendar-plus-o
fa-calendar-times-o
fa-cc
fa-chain-broken
fa-chain
fa-check-circle-o
fa-check-square-o
fa-circle-o-notch
fa-circle-o
fa-circle-thin
fa-clock-o
fa-close
fa-cloud-download
fa-cloud-upload
fa-cny
fa-code-fork
fa-comment-o
fa-commenting-o
fa-commenting
fa-comments-o
fa-cutlery
fa-dashboard
fa-dedent
fa-diamond
fa-dollar
fa-dot-circle-o
fa-envelope-o
fa-eur
fa-euro
fa-exchange
fa-external-link-square
fa-external-link
fa-eyedropper
fa-facebook-official
fa-feed
fa-file-archive-o
fa-file-audio-o
fa-file-code-o
fa-file-excel-o
fa-file-image-o
fa-file-movie-o
fa-file-o
fa-file-pdf-o
fa-file-photo-o
fa-file-picture-o
fa-file-powerpoint-o
fa-file-sound-o
fa-file-text-o
fa-file-text
fa-file-video-o
fa-file-word-o
fa-file-zip-o
fa-files-o
fa-flag-o
fa-flash
fa-floppy-o
fa-folder-o
fa-folder-open-o
fa-frown-o
fa-gbp
fa-ge
fa-gear
fa-gears
fa-gittip
fa-glass
fa-group
fa-hand-grab-o
fa-hand-lizard-o
fa-hand-o-down
fa-hand-o-left
fa-hand-o-right
fa-hand-o-up
fa-hand-paper-o
fa-hand-peace-o
fa-hand-pointer-o
fa-hand-rock-o
fa-hand-scissors-o
fa-hand-spock-o
fa-hand-stop-o
fa-hdd-o
fa-header
fa-heart-o
fa-hospital-o
fa-hourglass-1
fa-hourglass-2
fa-hourglass-3
fa-hourglass-o
fa-ils
fa-inr
fa-institution
fa-intersex
fa-jpy
fa-keyboard-o
fa-krw
fa-legal
fa-lemon-o
fa-level-down
fa-level-up
fa-life-bouy
fa-life-buoy
fa-life-saver
fa-lightbulb-o
fa-line-chart
fa-linkedin-square
fa-long-arrow-down
fa-long-arrow-left
fa-long-arrow-right
fa-long-arrow-up
fa-mail-forward
fa-mail-reply-all
fa-mail-reply
fa-map-o
fa-meanpath
fa-meh-o
fa-minus-square-o
fa-mobile-phone
fa-money
fa-moon-o
fa-mortar-board
fa-navicon
fa-newspaper-o
fa-pencil-square-o
fa-pencil-square
fa-pencil
fa-photo
fa-picture-o
fa-pie-chart
fa-play-circle-o
fa-plus-square-o
fa-ra
fa-refresh
fa-remove
fa-reorder
fa-repeat
fa-rmb
fa-rotate-left
fa-rotate-right
fa-rouble
fa-rub
fa-ruble
fa-rupee
fa-scissors
fa-send-o
fa-send
fa-share-square-o
fa-shekel
fa-sheqel
fa-shield
fa-sign-in
fa-sign-out
fa-sliders
fa-smile-o
fa-soccer-ball-o
fa-sort-alpha-asc
fa-sort-alpha-desc
fa-sort-amount-asc
fa-sort-amount-desc
fa-sort-numeric-asc
fa-sort-numeric-desc
fa-spoon
fa-square-o
fa-star-half-empty
fa-star-o
fa-sticky-note-o
fa-sun-o
fa-support
fa-tachometer
fa-thumb-tack
fa-thumbs-o-down
fa-thumbs-o-up
fa-ticket
fa-times-circle-o
fa-toggle-down
fa-toggle-left
fa-toggle-right
fa-toggle-up
fa-trash-o
fa-try
fa-turkish-lira
fa-unsorted
fa-usd
fa-video-camera
fa-warning
fa-wechat
fa-won
fa-y-combinator-square
fa-yc-square
fa-yc
fa-yen
fa-youtube-play

Where can i find Line-Awesome v 1.1

Hi I want to download line-awesome version 1.1
please give me the download link, thanks.

far fa-heart

Hey your icons are nice, but one icon is missing, the far fa-heart :)

psuedos not working

I cannot get psuedo styles to work with line awesome icons.

I have tried:
&::after { content: "\f0d7"; display: block; font-family: 'Line Awesome Free'; font-weight: 900; position: absolute; right: 0; }

i have seen posts and comments on the website that they should work, but they do not display for me at all.

Documentation improvement

There does not seem to be a github project to change the documentation, so I will try to outline the problems with this documentation page here.

As shown in the comments, as well as a question someone asked on Stackoverflow, it is completely unclear to people why sometimes .la-classes are not working. In my eyes, there are two things that can be improved in the current documentation:

• Both CDN links currently look identical, because the actual important thing is cut off. Because they look identical, in people's minds they are identical, even if they are not. At the very least, text should be added that describes what each of the links do. Something like: "This is a drop-in for fontawesome and only defines styles with the .fa-prefix. It will not add any .la-variants" and "This will add styling for all .la-variants of the icons.".
• The first link falsely suggests that you will be using Line Awesome. Sure, the CDN is hosted by Line Awesome, and you probably serve your own versions of each of the icons, but any attempt at actually using the icons as described in the documentation will lead to nothing happening and frustrating experiences for people wanting to switch over. One way of preventing that is making the first CDN link actually a transition-link, that defines both .fa-styles and .la-styles. Another way would be to make it extra clear that you need to use both CDN-links if you want to transition an existing application to .la-styling.

Please add Sunset and Sunrise

Hi guys,

Thank you for your awesome work!

Can you add the sunset and sunrise icons, like in the Icon 8 Windows Icon pack?

Please don't make it identical, but please make it sexy, as you usually do! :D

Thank you so much!

SCSS assets

Hi
I can't find anymore the .scss files to include in my project. I need to import it in this way, in my main.scss:

$la-css-prefix: la;
@import "~line-awesome/src/line-awesome";

Now this doesn't work anymore.
Could help?
Thanks

facebook messenger doesn't work

I added this to the last of the css to get it to work:

.la.la-facebook-messenger { font-family: 'Line Awesome Brands'; font-weight: 400; }

Unable to import/use with Webpack

Hi, I've been trying to use this amazing icon font variation in a Vue project using Webpack, but nothing worked form me, first it shows a lot of problems with font formats like woff or woff2, after adding support to in the rules it just import like a strange text font (maybe like algerian):

My Webpack test:

           {
                test: /\.(ttf|woff|woff2|eot|svg|gif|png|jpg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                use: [{
                    loader: 'file-loader'
                }]
            }

My import look like this in an scss file:
@import '~line-awesome/dist/line-awesome/css/line-awesome.min.css';

SVG files

Is it possible to have the SVG sources in the repo?
For some of us, inline SVG or linked SVG are preferred method rather than icon font.
Line-awesome is great, Thanks

No default jsDelivr CDN file set

This package doesn't have a default file set. You can set it via jsdelivr, browser, or main field in package.json

Also problem with unpkg.com sources : https://unpkg.com/[email protected]

TikTok Icon

Hi Guys,
Would it be possible to add the TikTok Logo icon?!

icon request: pause-circle

Right now line-awesome has play-circle. But it does not have pause-circle.

The reason I request this is because a player when you click play button, it will change to pause button. However, right now the style is not consistent, because one has circle, the other does not have. I hope both can have the circle version.

Thanks!

No full circle

I was looking to replace font awesome with line awesome and noticed that the the "la-circle" was just an outline. Which, makes sense but I see that there is a "la-square-full". I use the circle for indicators and having a filled circle would be great!

MIT License

I love yout Good Boy License.
But for a MIT licensed project I'm working on I'd like to be sure that we can use it.
You claim that you are releasing the icon pack "either under MIT or The Good Boy License".
So, I understand that we can use on MIT project right?

Best Regards,
awesome work!

Tree shaking?

Would all line-awesome need to be imported at once, or can we just load one at a time?

CDN file doesn't contain .la class CSS

I have included
in my index.html, but when this file is downloaded to my browser, it does not have .la classes.
All it has is .fa. Henceforth the fonts are not working

Site menu does not work correctly in firefox

Every menu item just bumping page to the top

Copy-pasted link is also opens top scroll position.
Issue not reproducing in safari and chrome.
FF 74.0 MAC OS

.lal is missing font definition

It seems like the .lal class exists in the CSS file, but doesn't have the font-definition like the other classes .

Custom build

Are there any plans to support creating custom builds containing only the icons I use in my app? Currently line-awesome.min.css takes up about half of my bundle.css file even though I'm only using 7 of the icons in my app. It would be especially useful for improving load times for mobile users.

CSS Pseudo-elements broken after upgrading to 1.3.0

After upgrading from 1.1.0 to 1.3.0 my pseudo-elements are broken, e.g.

.menu-sec nav > ul > li.menu-item-has-children > a::before {
    content: "\f107";
    font-family: lineawesome;
}

Also tried font-family: 'Line Awesome Free'

Am I missing something here?

Line awesome class is false !!

Hi all, i open this issue because i use Line awesome with Nuxt.js and i had a probleme.

in Line awesome website ( https://icons8.com/line-awesome ) for use icon they show you a exemple like this
<i class="las la-angle-right"></i>
but this DOES NOT WORK !! for use this class you do replace the name class like this
<i class="fas fa-angle-right"></i>
i dont know why just i want help you :)

.fa class not working after upgrade

After upgrading to v1.3.0 I couldn't get fa fa- css to work i.e. icons don't unless you use la la-, I've tried using font-awesome-line-awesome/css/all.css stylesheet but it still doesn't work, is this the expected behavior?

Download link on 'How To' page broken

The download link on the 'How To' page https://icons8.com/line-awesome/howto returns a 404 error.

Is there an alternative? I'd prefer not to use the cdn in my project

Add "icons.json" similar to FA icons.json

FA contains a metafile icons.json, which allows to automatically "do something" for every icon, i.e. generate icon selectors.

Follow up to #44

question-circle size is not consistent with other xx-circle icons

You can see from the screenshot, the size of question-circle is a little smaller than other xx-circle icons when set to same font-size.

update to match Font Awesome v4.7

I guess the Line Awesome is based on v4.4.0 version of FontAwesome.
What about push'in LineAwesome to match the latest FontAwesome release.

• http://fontawesome.io/icons/#new

Icon size

Awesome work guys, the icons look great.
The only problem I have is the icon size. As you mention most icons look better at 32x32.
Is there a css class I could use to render the icons in different sizes like in font-awesome or do I have to create a style like:

.la {font-size: 22px}

No font selection for la-dev

Hi I'm using the CSS files from Line awesome, and went to use the la-dev icon today, only to find a sqaure. I can't determine how this isn't working from the scss files, but I had to manually add

.la.la-dev {
    font-family: 'Line Awesome Brands';
    font-weight: 400;
}

to the line-awesome.css file to fix the issue. I would've sent a PR over if I knew how to fix it 🤷‍♂️

css pseudo-elements not working

Hi,
i'm trying to set line-awesome icon in pseudo element in css but i isn't working
my class is:

.breadcrumb-content .list-items li:before {   
    position: absolute;  
    content: "\f105";  
    font-family: "Line Awesome Free";  
}  

right angle does not appear

Please tag versions so that we can pin dependencies

Thank you!

Question icon style is not consistent

Right now question icon is not consistent with other icons.
It would be great to change to simple ?. Thanks

Usage as SVG sprite or some sort of build tool?

I'm used to generate icons as svg sprites with tools such as icomoon.io and it would be awesome if I could use your icons in a similar way. e.g. npm script etc. to generate only the wanted icons.

Anyways, your icons look great, thanks!

Why is star icon solid?

Great package btw.

Why is the star icon solid and not line?

There is star-half-alt which gives half solid half lined. Could there not be a star-alt which gives a full star that is not solid?

Mushroom icon

Hello,

I know there is no such icon in FontAwesome, but would it be possible to include a new icon, let's say "las la-mushroom" ?
I am currently building a new application for mushroom pickers and I cannot find this kind of icon in any set.

Kind regards.

No way to copy as symbol

There is no cheatsheet on the site / ability to copy SVG to use in figma like FA5. How to use it in text layers?

Error copying sample website code

When trying to copy the icon code on the line-awesome website it is not doing it correctly, thus missing character. So when trying to copy to the project using this package, the icon will not render.

Edit.: I almost forgot. Thanks for the package, I really enjoyed it!

How to use Line-Awesome icon font in Ionic 3 app?

I am trying to use Line-Awesome icon font in my ionic 3 project but can't make it work. I have followed few tutorials like this - https://www.joshmorony.com/including-custom-css-files-in-the-ionic-build-process/

Can someone guide me to use proper method to make it work? This is the link of line awesome icon fonts based on Fontawesome https://github.com/icons8/line-awesome

Error i am getting -

Any actively-maintained fork or a similar icon pack?

Yarn Publish.

I tried to get the Line Awesome solution via Yarn from this package and did not succeed. The package does not work and I really do not know what it's all about.

Is this the official package? If yes, could they ensure that it is functional?

In order to use the feature I created a second package in Yarn and called it "Line Awesome 2". You can see it here. If that hurts the rules, I apologize. Otherwise, can we make it official?

If you tell me that the existing package works I remove my creation.

fa-firefox and fa-cc-paypal wrong ??

such as an example fa-firefox show linkedin icons
now I compared this css with that chart
and the unicode (f269) for firefox seams ok!

note : fa-cc-paypal also appear different as expected.

Icon search displays icons multiple times

The icon search feature is great but I tend to get a bit cross-eyed with all the duplicate icons displayed in the search output.

Searching at https://icons8.com/line-awesome

Icon Request : american-sign-language-interpreting

Hello,

I noticed this icon was missing from Line Awesome. Is there a way to fall back to font awesome if the icon isn't present in the line awesome set?

Commercial use license inquiry

I have downloaded the line-awesome file.
I want to use it for commercial purposes.
Can I link to the license and nothing?

Publish?

I couldn't find this in the npm registry, is it published?
Thank you!

"square" icon not useful

Can you please replace the square icon in LineAwsome with the "square outline" icon from the icons8 / Windows 10 set. The current square icon is absolutely incompatible with "check-square" and "plus-square" and breaks a lot of stuff when used as FontAwesome replacement. For example check-lists.

Circle inconsistent

The line thickness on circle is less than the line thickness used on the circles around *-circle, eg question-circle. The effect is that, when overlaying a circle on other characters, such as save and using together with eg question-circle, an inconsistent interface is created.

Suggestion: increase the line thickness of circle to match that of circle-notch, or add a thicker circle that is the same as circle-notch without the notch. Alternatively, if using bold with the current circle will give the same line width as circle-notch, that will help too.

Note: this is when using the solid ttf font in Windows. The svg files seem to show the circles with the same line width