thesabbir / simple-line-icons

Simple and Minimal Line Icons

Simple Line Icons

Simple line icons with CSS, SASS, LESS & Web-fonts files.

Preview & Docs

You can find a cheat sheet of the complete set of icons at Simple Line Icons - GitHub Pages

Installation

via npm

npm install simple-line-icons --save

via bower

bower install simple-line-icons --save

via cdnjs

Alternatively, you can also clone or download this repository as zip.

If you are a designer, you can use this creative cloud library in your project.

Customizing LESS/SASS variables

LESS:

@simple-line-font-path     : "/path/to/font/files";
@simple-line-font-family   : "desired-name-font-family";
@simple-line-icon-prefix   : prefix-;

SASS:

$simple-line-font-path     : "/path/to/font/files";
$simple-line-font-family   : "desired-name-font-family";
$simple-line-icon-prefix   : "prefix-";

Credits

Jamal Jama for creating this awesome webfont & Ahmad Firoz for extending it further.

Contributors

Check Here

Contributions

Contributions are more then welcome. Keep them coming! Please make sure you have read our guide line.

License

You're free to use the web-font in a template/theme intended for sale on marketplaces like ThemeForest.

CSS, SCSS & LESS files are under MIT License.

simple-line-icons's Issues

NPM support

Hi Sabbir,

Can you add the support by adding a package.json and publishing the project on NPM.
It's not a big deal but I stopped using bower and having it on NPM avoid me to have two dependencies manager.

Thanks man :)

Some improvments

One

<span class="icons-logout"> Log out me!</span>

This feature need css like:

*[class^="icons-"] {
  font-family: inherit;
}
*[class^="icons-"]:before {
  font-family: 'Simple-Line-Icons';
}

Anyway, there is not need to have all span under the Simple-Line-Icons font. It's enough to have font-family style only for icon (ie :before). Thus we could use outer font inside the span.

Two

It's would be nice if css names were: .icons-gameController, not .icons-game-controller. Cause of - is significant character in css, and used for some logic, not for words separator. It's a more right way IMO to use _ or camelCase, but not -.

https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

[attr|=value]
Represents an element with an attribute name of attr. Its value can be exactly “value” or can begin with “value” immediately followed by “-” (U+002D). It can be used for language subcode matches.

Thanks for icons! It's amazing!

Nuget package for Simple Line Icons

Hi is there a nuget for ASP MVC simple line icons - for straight WEB pages , like ASP MVC?

I see this here, but its too old and it changes the icons for Xamarin, https://www.nuget.org/packages/xamarin-iconify-simplelineicons/

Since many ASP developers are using this...

http://www.hanselman.com/blog/CreatingANuGetPackageIn7EasyStepsPlusUsingNuGetToIntegrateASPNETMVC3IntoExistingWebFormsApplications.aspx
thanks

Google+ icon Update

I miss g+ icon, any chance to add?

Icon google not working

I did a npm install and all icons are working except the google icon.

Less

Hi

Please include a less file, so that we can adjust the font path via variable (like the scss)

If you would like I can submit a pull request with an added less file.

Thanks,
Frank

Pinterest spelled incorrectly

It looks like you spell it: pintarest

Should be: pinterest

.icon-people

In site, icon users, class .icon-people not correspond, correct class is .icon-users

😄

More infos about this project

Do you want this library is an alternate library or a complementary part?

Company / organization icon

It would be great to have an organization/company icon.

Thanks,

Vimeo Icon

Is it possible to make a social media icon for vimeo?

Reorder icons and unicode numbers

Can't open SVG in vector applications

I can't seem to open the SVG file in an vector editor (Inkscape, Sketch, Adobe Illustrator, etc.) . It appears to be blank. Also, the SVG file appears to be blank in a browser as well. Thanks.

Something wrong on mobile

Hi,
I love this font so much, but I can't use it if I put it in my own server.
It preforms perfectly when I use cdnjs way to do it. Once I download it(zip) and put in my server, the icon has wrong display on mobile device(PC is fine). Did I miss something?

Iphone6s plus ios 9.2

My server info:
Rails 4.2.3

Sorry about my English.

Josh

Create build script

Hello, first of all, I really like this project and i think it's a very cute set of icons.

I wanted to help creating new icons but to avoid significative changes at every release i think that we should create a build script in order to standardize the process.

Let me know what do you think about that..

Check-in original SVG files

It'd be nice to be able to just grab the raw SVG for individual icons and use that instead of needing to load all the fonts.

have preview page of the icons

when I go to http://graphicburger.com/wp-content/uploads/2013/10/Simple-Line-Icons-Webfont-600.png
I am not able to make the relation between the icon and it's name
would be very useful to have a preview with name similar that http://fortawesome.github.io/Font-Awesome/icons/
Or how do you do to choose you icons ?

Typo in class name

.icon-drawar should be .icon-drawer

:)

Thanks

Search functionality in docs

Website/docs new design

Please create VK icon

Hi,

we love your icons and regularly use them on our projects.

Please create VK icon for us.

Thanks a lot :)

Add Woff2 format

Please, add woff2 format.

The new WOFF 2.0 Web Font compression format offers a 30% average gain over WOFF 1.0 (up to 50%+ in some cases). WOFF 2.0 is available since Chrome 36 and Opera 23.

Gist (from ttf -> woff2): https://gist.github.com/sergejmueller/cf6b4f2133bcb3e2f64a
W3C spec: http://www.w3.org/TR/WOFF2/

social-instagram

On google chrome 47.0.2526.73 (64-bit), osx 10.11.1, retina screen:

Add precommit test and TravisCI

I would like to provide simple build test before commits as a precommit hook and maybe use TravisCI to ensure that pull request and each commit is correct.

I would use gulp and npm scripts to make it as simple as possible to use and transparent to most.

[class^=""], [class*=" "] not compatible with other webfonts

I have a project in which I am using fontawesome and simple line icons, the older code which lists out all the classes worked fine, but when I updated my fontawesome icons vanished.

Problem was this selector:

[class^=""], [class*=" "]

I wound up reverting to this commit:
https://github.com/thesabbir/simple-line-icons/blob/a8dcf0c5bd4cd0c36604e054478c021dda6aef8e/scss/simple-line-icons.scss

Could you explain why the change was made?

Calendar spelt incorrectly

Hi,

Just though I would let you know that you spelt it "calender", when it should be "calendar" on the preview website.

Instagram icon missing

I can't see any instagram icon. Is there a chance you could insert it in?

Thanks

Syntax error in simple-line-icons/scss/simple-line-icons.scss

Hi,
The Sass gem in Ruby doesn't seem to like the syntax of simple-line-icons/scss/simple-line-icons.scss.

I'm getting the following error on Rails:

The suspect code seems to be:

.#{$simple-line-icon-prefix} {
  &user-female, &user-male {
    /* CSS rules go here */
  }
}

By my reading, sass seems to not like the &user-female syntax.

Thanks for your help.

add icons to set

Hi, thank you for greate work!
I have a question, - is there easy way to add these icons to set, with apps like fontello or icomoon without changing default names and chars.
If I import existing font it generates new names such as glyph1-icon, glyph2-icon and etc. Or could you provide separate svg files with names (icon-rocket, icon-phone). Thank you.
P.S. skype icon will be very appreciated

Instagram Icon

Hi everyone, i´m making a web page from Porto-Responsive-html5-Template 4.2.0 and need to change icon of Linkedin for Instagram, but this version of template do not have Instagram icon. I was trying to replace the folder that you can download on your site , but my page is unconfigures all . Please , if any easiest way to integrate this icon without suffering much. I'm not as good programmer and I have two whole days trying. And excuse my ignorance.

Thank So much!!!!

Tomás

Documentation

Is there some documentation on how I can create my own icons?

bower simple-line-icons#2.2.x invalid-meta The "main" field cannot contain font, image, audio, or video files

In my Jenkins build I am getting this reported as error.
bower simple-line-icons#2.2.x invalid-meta The "main" field cannot contain font, image, audio, or video files

Are the fonts necessary in the main definition?
Because the automation will install via bower, I can't manually change the main definition for that file.

Please advice.

Thanks.

Changing icon size in the docs affects icon name text

When font size is change it should only change icon-font font size not the texts.

Add a broken heart ("dislike") icon

Hello. We have a heart icon (.icon-heart) which is intended to be used as a "Like" icon/button. But we don't have a reverse icon, a "Dislike" one, which is logically might be an image of broken heart. I suggest and ask you (or somebody else who is good at design) to add the broken heart image to this collection. Something like this, but done in a contour instead of filled figure.

Error in IE EoT Linking

The version should come in front of #.

Create a preview of different icon sizes.

On the preview page, below the Search bar, add something like this:

Very useful for the comparison.

Need .icon-minus icon

Hi,
It will be very helpful if you can provide .icon-minus or let me know how to generate it.

Thanks
Chethan

Improve new icons

Hi,

This icons are very amazing rather then font awesome, can you implement more icons?

Calendar spelled incorrectly in CDN 2.2.1

The CDN file http://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.2.1/css/simple-line-icons.css
has the icon-calendar misspelled as 'icon-calender'.

Was there a logic decision to change the spelling in version 2?

updated icons not in npm?

Hey,

I noticed that there are some new icons such as the arrow-down instead of the arrow-down-circle.

I wish to use that new arrow-down... how do I update my npm to have the latest files?

Thanks.

JB

New icon request

Can you provide these icons

Mobile,Tablet, Exclamation icons

Make search case insensitive

Search is currently case sensitive.

Download/upload icons

Can you guys add these two as icon-download and icon-upload, that would be great!
Archive.zip
Origin: https://dribbble.com/shots/1544073-Free-80-Crispy-Icons-in-PSD-AI-SVG-Webfont

I find the two icon-cloud-download and icon-cloud-upload to be more "cloud" oriented.

Cheers

Icons been render as random arabic text and emoji

Hi,

I am trying to use these icons. But they appear as arabic text and emojis very randomly on iOS devices.

Can you please guide me through this?

Search

Why is your search bar gone!
I'm loving the icons, such a bummer I can't search anymore ...

Update instagram icon

new icon:

Resolve font problems

https://fontforge.github.io/problems.html

Icon request: icon-close without circle

It could be really great with an icon-close icon, just without the border/circle

Cheatsheet in docs

Hi there,

Your repository is great and thank you for your contribution! I really love the idea of having a package like this and being able to download/install it!

I'd like to suggest a cheatsheet to copy/paste your icons on my design files (.ai, .psd, etc.). Right now, I'm not able to solve this (or at least I don't know how to).

It is something like this https://fortawesome.github.io/Font-Awesome/cheatsheet/

Thanks 😄

Icon request: events icon

Very similar to calendar icon.

An example from material-icon:

https://design.google.com/icons/#ic_event