emblemicons/index.html at master · emblemicons/emblemicons · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
---
layout: home
title: "An open-source free library of 1000+ icons"
---
<section class="jumbotron" style="background-color:#3166ca;">
    <div class="container">
        <h3 class="text-light">
            Emblemicons is an open-source library of most commonly and frequently used icons in product development, product design, business presentations, and academic projects.
            You are completely free to use and download the icons for your personal and business requirements.
        </h3>
        <h5 class="text-light pt-5">With Emblemicons, you can choose from a pool of 1000+ frequently used icons and do the following 4 things:</h5>
        <ol class="lead text-light pt-1 pb-2">
            <li>You can download PNG and JPG images in 6 available sizes (12px, 18px, 24px,  36px, 48px, 72px).</li>
            <li>You can download SVG file and style it with CSS.</li>
            <li>You can download PDF file too.</li>
            <li>You can copy the HTML code and use in your projects directly.</li>
        </ol>
        <div class="d-flex justify-content-center pt-3">
            <a class="btn btn-warning btn-lg" href="{{ "/blog.html" | relative_url }}" role="button">Read Blog</a>
            <a class="btn btn-warning btn-lg ml-4" href="{{ "#icons" | relative_url }}" role="button">Show Icons</a>
        </div>
        <div class="d-flex justify-content-left">
            <a href="https://www.producthunt.com/posts/emblemicons?utm_source=badge-top-post-badge&utm_medium=badge&utm_souce=badge-emblemicons" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/top-post-badge.svg?post_id=257840&theme=light&period=daily" alt="Emblemicons - An open-source free to use library of 1000+ beautiful icons | Product Hunt Embed" style="width: 250px; height: 54px;" width="250" height="54" /></a>
        </div>
    </div>
</section>
<section>
    <br>
    <br>
</section>
<section class="jumbotron mt-4" style="background-color:#660261;">
    <div class="container">
        <h2 class="text-light text-center">
            All Figma users can grab the Emblemicons Figma file from the Figma community.
            You will get free access to all the 1000+ icons and can use it for free for your personal, academic and business projects.
        </h2>
        <div class="d-flex justify-content-center mt-4 pt-3">
            <a class="btn btn-success btn-lg" href="https://www.figma.com/community/file/886469461964717919/Emblemicons" target="_blank" role="button">
                <svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 300" width="24" height="24"><style>.st0{fill:#0acf83}.st1{fill:#a259ff}.st2{fill:#f24e1e}.st3{fill:#ff7262}.st4{fill:#1abcfe}</style><path id="path0_fill" class="st0" d="M50 300c27.6 0 50-22.4 50-50v-50H50c-27.6 0-50 22.4-50 50s22.4 50 50 50z"/><path id="path1_fill" class="st1" d="M0 150c0-27.6 22.4-50 50-50h50v100H50c-27.6 0-50-22.4-50-50z"/><path id="path1_fill_1_" class="st2" d="M0 50C0 22.4 22.4 0 50 0h50v100H50C22.4 100 0 77.6 0 50z"/><path id="path2_fill" class="st3" d="M100 0h50c27.6 0 50 22.4 50 50s-22.4 50-50 50h-50V0z"/><path id="path3_fill" class="st4" d="M200 150c0 27.6-22.4 50-50 50s-50-22.4-50-50 22.4-50 50-50 50 22.4 50 50z"/></svg>
                Duplicate Emblemicons Figma File
            </a>
        </div>
    </div>
</section>
<section class="container-fluid" id="icons">
    <div class="container">
        <h2 class="text-primary pb-2">Icons</h2>
        <input class="form-control rounded-pill border border-primary mx-auto mb-2" id="userInput" type="text" placeholder="Start typing to filter icons..." style="width:60%; font-size:1.2rem;">
        <br>
        <ul class="row row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-lg-5 row-cols-xl-6 list-unstyled" id="iconsList">
            {% for icon in site.icons %}
            <li class="col mb-4">
                <div class="card">
                    <div class="card-body bg-light">
                        <div style="height:100px; width:100%" class="d-flex justify-content-center img-container">
                            <img src="{{ icon.svg | relative_url }}" height="48px" width="48px" class="align-self-center" alt="{{ icon.alt }}">
                        </div>
                    </div>
                </div>
                <h6 class="text-center pt-3"><a href="{{ icon.url | relative_url }}" class="text-muted" style="font-size: 0.8rem;">{{ icon.title }}</a></h6>
            </li>
            {% endfor %}
        </ul>
    </div>
    <script>
        $(document).ready(function(){
            $("#userInput").on("keyup", function() {
                var value = $(this).val().toLowerCase();
                $("#iconsList li").filter(function() {
                    $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
                });
            });
        });
    </script>
</section>