{"id":1352,"date":"2026-08-10T17:43:04","date_gmt":"2026-08-10T14:43:04","guid":{"rendered":"https:\/\/adawatiplus.online\/en\/?page_id=1352"},"modified":"2026-08-17T12:58:44","modified_gmt":"2026-08-17T09:58:44","slug":"icons-library","status":"publish","type":"page","link":"https:\/\/adawatiplus.online\/en\/icons-library\/","title":{"rendered":"Icon Library"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1352\" class=\"elementor elementor-1352\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6ddd09e e-con e-atomic-element e-flexbox-base e-83ec0e0 \" data-id=\"6ddd09e\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"6ddd09e\">\n    \t\t<div class=\"elementor-element elementor-element-65bf0b8 elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"65bf0b8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!--\r\nAdawati Plus \u2014 Icons Library Deep Content\r\nPage: \/icons-library\/\r\nReady for Elementor HTML Widget\r\n-->\r\n\r\n<style>\r\n:root{\r\n    --adp-orange:#fc9012;\r\n    --adp-cyan:#00bddd;\r\n    --adp-ink:#172033;\r\n    --adp-muted:#64748b;\r\n    --adp-line:#dce7ee;\r\n    --adp-soft:#f5f9fc;\r\n    --adp-warm:#fff8ef;\r\n    --adp-white:#ffffff;\r\n    --adp-shadow:0 14px 40px rgba(23,32,51,.07);\r\n    --adp-shadow-soft:0 8px 25px rgba(23,32,51,.045);\r\n}\r\n\r\nhtml[lang=\"ar\"],\r\nhtml[lang=\"ar\"] body,\r\nhtml[lang=\"ar\"] button,\r\nhtml[lang=\"ar\"] input,\r\nhtml[lang=\"ar\"] textarea,\r\nhtml[lang=\"ar\"] select{\r\n    font-family:\"Cairo\", sans-serif;\r\n}\r\n\r\nhtml[lang=\"en\"],\r\nhtml[lang=\"en\"] body,\r\nhtml[lang=\"en\"] button,\r\nhtml[lang=\"en\"] input,\r\nhtml[lang=\"en\"] textarea,\r\nhtml[lang=\"en\"] select{\r\n    font-family:\"Montserrat\", sans-serif;\r\n}\r\n\r\nhtml[lang=\"ar\"] h1,\r\nhtml[lang=\"ar\"] h2,\r\nhtml[lang=\"ar\"] h3,\r\nhtml[lang=\"ar\"] h4,\r\nhtml[lang=\"ar\"] h5,\r\nhtml[lang=\"ar\"] h6,\r\nhtml[lang=\"ar\"] .elementor-heading-title{\r\n    font-family:\"Cairo\", sans-serif !important;\r\n    font-weight:700 !important;\r\n}\r\n\r\n.adp-icons-hub,\r\n.adp-icons-hub *{\r\n    box-sizing:border-box;\r\n}\r\n\r\n.adp-icons-hub{\r\n    width:100%;\r\n    max-width:100%;\r\n    overflow:visible;\r\n    direction:ltr;\r\n    color:var(--adp-ink);\r\n    font-family:\"Montserrat\",sans-serif;\r\n    font-size:16px;\r\n    line-height:1.95;\r\n    text-align:left;\r\n}\r\n\r\n.adp-icons-hub a{\r\n    color:inherit;\r\n    text-decoration:none;\r\n}\r\n\r\n.adp-icons-container{\r\n    width:min(1180px,calc(100% - 36px));\r\n    margin-inline:auto;\r\n    overflow:visible;\r\n}\r\n\r\n.adp-icons-hero{\r\n    position:relative;\r\n    isolation:isolate;\r\n    width:100vw;\r\n    aspect-ratio:2 \/ 1;\r\n    min-height:0;\r\n    margin:22px calc(50% - 50vw) 0;\r\n    overflow:hidden;\r\n    border-top:1px solid var(--adp-line);\r\n    border-bottom:1px solid var(--adp-line);\r\n    border-left:0;\r\n    border-right:0;\r\n    border-radius:0;\r\n    background:#ffffff;\r\n    box-shadow:none;\r\n}\r\n\r\n.adp-icons-hero::after{\r\n    position:absolute;\r\n    inset:0;\r\n    z-index:1;\r\n    pointer-events:none;\r\n    background:linear-gradient(\r\n        90deg,\r\n        rgba(255,255,255,.98) 0%,\r\n        rgba(255,255,255,.93) 23%,\r\n        rgba(255,255,255,.76) 39%,\r\n        rgba(255,255,255,.18) 58%,\r\n        rgba(255,255,255,0) 72%\r\n    );\r\n    content:\"\";\r\n}\r\n\r\n.adp-icons-hero-copy{\r\n    position:absolute;\r\n    z-index:2;\r\n    top:0;\r\n    left:max(28px,calc((100vw - 1180px)\/2));\r\n    bottom:0;\r\n    display:flex;\r\n    flex-direction:column;\r\n    justify-content:center;\r\n    width:min(650px,44vw);\r\n    min-height:0;\r\n    margin:0;\r\n    padding:54px 0;\r\n}\r\n\r\n.adp-icons-kicker,\r\n.adp-icons-section-kicker{\r\n    display:inline-flex;\r\n    align-items:center;\r\n    gap:8px;\r\n    width:max-content;\r\n    margin:0 0 15px;\r\n    padding:7px 13px;\r\n    border-radius:999px;\r\n    background:var(--adp-warm);\r\n    color:#a95d05;\r\n    font-size:13px;\r\n    font-weight:700;\r\n}\r\n\r\n.adp-icons-kicker::before,\r\n.adp-icons-section-kicker::before{\r\n    width:8px;\r\n    height:8px;\r\n    border-radius:50%;\r\n    background:var(--adp-orange);\r\n    content:\"\";\r\n}\r\n\r\n.adp-icons-hero h1{\r\n    max-width:620px;\r\n    margin:0;\r\n    color:var(--adp-ink);\r\n    font-size:clamp(35px,3.5vw,50px);\r\n    line-height:1.34;\r\n    letter-spacing:-.4px;\r\n}\r\n\r\n.adp-icons-hero h1 span{\r\n    color:var(--adp-cyan);\r\n}\r\n\r\n.adp-icons-hero-lead{\r\n    max-width:590px;\r\n    margin:17px 0 0;\r\n    color:#46556a;\r\n    font-size:16px;\r\n    line-height:1.95;\r\n}\r\n\r\n.adp-icons-hero-actions{\r\n    display:flex;\r\n    flex-wrap:wrap;\r\n    align-items:center;\r\n    justify-content:flex-start;\r\n    gap:12px;\r\n    margin-top:22px;\r\n}\r\n\r\n.adp-icons-hero-btn{\r\n    position:relative;\r\n    display:inline-flex;\r\n    align-items:center;\r\n    justify-content:center;\r\n    min-width:138px;\r\n    min-height:46px;\r\n    padding:10px 20px;\r\n    overflow:hidden;\r\n    border:1px solid transparent;\r\n    border-radius:12px;\r\n    color:#fff !important;\r\n    font-family:\"Montserrat\",sans-serif !important;\r\n    font-size:14px;\r\n    font-weight:700;\r\n    line-height:1;\r\n    letter-spacing:.1px;\r\n    box-shadow:0 9px 22px rgba(23,32,51,.11);\r\n    transition:\r\n        transform .22s ease,\r\n        box-shadow .22s ease,\r\n        background .22s ease,\r\n        border-color .22s ease;\r\n}\r\n\r\n.adp-icons-hero-btn::after{\r\n    width:7px;\r\n    height:7px;\r\n    margin-left:9px;\r\n    border-top:2px solid currentColor;\r\n    border-right:2px solid currentColor;\r\n    transform:rotate(45deg);\r\n    transition:transform .22s ease;\r\n    content:\"\";\r\n}\r\n\r\n.adp-icons-hero-btn-icons{\r\n    background:var(--adp-cyan);\r\n    border-color:var(--adp-cyan);\r\n}\r\n\r\n.adp-icons-hero-btn-favicons{\r\n    background:var(--adp-orange);\r\n    border-color:var(--adp-orange);\r\n}\r\n\r\n.adp-icons-hero-btn:hover,\r\n.adp-icons-hero-btn:focus-visible{\r\n    transform:translateY(-3px);\r\n    background:var(--adp-ink);\r\n    border-color:var(--adp-ink);\r\n    box-shadow:0 14px 30px rgba(23,32,51,.18);\r\n}\r\n\r\n.adp-icons-hero-btn:hover::after,\r\n.adp-icons-hero-btn:focus-visible::after{\r\n    transform:translateX(3px) rotate(45deg);\r\n}\r\n\r\n.adp-icons-hero-btn:focus-visible{\r\n    outline:3px solid rgba(0,189,221,.24);\r\n    outline-offset:3px;\r\n}\r\n\r\n.adp-icons-hero-points{\r\n    display:none;\r\n}\r\n\r\n.adp-icons-hero-image{\r\n    position:absolute;\r\n    inset:0;\r\n    z-index:0;\r\n    width:100%;\r\n    height:100%;\r\n    padding:0;\r\n    border:0;\r\n    background:#ffffff;\r\n}\r\n\r\n.adp-icons-hero-image img{\r\n    display:block;\r\n    width:100%;\r\n    height:100%;\r\n    max-height:none;\r\n    object-fit:contain;\r\n    object-position:center center;\r\n    border-radius:0;\r\n}\r\n\r\n.adp-icons-section{\r\n    width:100%;\r\n    margin-top:58px;\r\n}\r\n\r\n.adp-icons-section-head{\r\n    max-width:900px;\r\n    margin-bottom:23px;\r\n}\r\n\r\n.adp-icons-section h2{\r\n    margin:0;\r\n    color:var(--adp-ink);\r\n    font-size:30px;\r\n    line-height:1.5;\r\n}\r\n\r\n.adp-icons-section-intro{\r\n    margin:11px 0 0;\r\n    color:var(--adp-muted);\r\n}\r\n\r\n.adp-icons-grid{\r\n    display:grid;\r\n    grid-template-columns:repeat(3,minmax(0,1fr));\r\n    gap:18px;\r\n}\r\n\r\n.adp-icons-card{\r\n    padding:24px;\r\n    border:1px solid var(--adp-line);\r\n    border-radius:19px;\r\n    background:#fff;\r\n    box-shadow:var(--adp-shadow-soft);\r\n}\r\n\r\n.adp-icons-card:nth-child(odd){\r\n    border-top:4px solid var(--adp-cyan);\r\n}\r\n\r\n.adp-icons-card:nth-child(even){\r\n    border-top:4px solid var(--adp-orange);\r\n}\r\n\r\n.adp-icons-card h3{\r\n    margin:0;\r\n    color:var(--adp-ink);\r\n    font-size:19px;\r\n    line-height:1.6;\r\n}\r\n\r\n.adp-icons-card p{\r\n    margin:9px 0 0;\r\n    color:var(--adp-muted);\r\n    font-size:14.5px;\r\n}\r\n\r\n.adp-icons-feature{\r\n    display:grid;\r\n    grid-template-columns:minmax(0,1fr) 270px;\r\n    gap:30px;\r\n    align-items:center;\r\n    padding:30px;\r\n    border:1px solid var(--adp-line);\r\n    border-radius:22px;\r\n    background:#fff;\r\n    box-shadow:var(--adp-shadow-soft);\r\n}\r\n\r\n.adp-icons-feature + .adp-icons-feature{\r\n    margin-top:18px;\r\n}\r\n\r\n.adp-icons-feature:nth-child(even){\r\n    background:linear-gradient(135deg,#fff,#fffaf4);\r\n}\r\n\r\n.adp-icons-feature-copy h3{\r\n    margin:0;\r\n    font-size:24px;\r\n    line-height:1.55;\r\n}\r\n\r\n.adp-icons-feature-copy p{\r\n    margin:11px 0 0;\r\n    color:var(--adp-muted);\r\n}\r\n\r\n.adp-icons-feature-points{\r\n    display:flex;\r\n    flex-wrap:wrap;\r\n    gap:8px;\r\n    margin-top:15px;\r\n}\r\n\r\n.adp-icons-feature-points span{\r\n    padding:6px 9px;\r\n    border-radius:8px;\r\n    background:var(--adp-soft);\r\n    color:#526276;\r\n    font-size:12px;\r\n    font-weight:700;\r\n}\r\n\r\n.adp-icons-feature-image{\r\n    display:block;\r\n    align-self:center;\r\n    width:100%;\r\n    aspect-ratio:1 \/ 1;\r\n    min-height:0;\r\n    padding:0;\r\n    overflow:hidden;\r\n    border:1px solid var(--adp-line);\r\n    border-radius:16px;\r\n    background:transparent;\r\n}\r\n\r\n.adp-icons-feature:nth-child(even) .adp-icons-feature-image{\r\n    background:transparent;\r\n}\r\n\r\n.adp-icons-feature-image img{\r\n    display:block;\r\n    width:100%;\r\n    max-width:none;\r\n    height:100%;\r\n    max-height:none;\r\n    object-fit:cover;\r\n    object-position:center center;\r\n    border-radius:15px;\r\n}\r\n\r\n.adp-icons-cta{\r\n    display:inline-flex;\r\n    align-items:center;\r\n    justify-content:center;\r\n    margin-top:18px;\r\n    padding:10px 16px;\r\n    border-radius:11px;\r\n    background:var(--adp-ink);\r\n    color:#fff !important;\r\n    font-size:14px;\r\n    font-weight:700;\r\n    transition:transform .2s ease,background .2s ease;\r\n}\r\n\r\n.adp-icons-cta:hover,\r\n.adp-icons-cta:focus{\r\n    transform:translateY(-2px);\r\n    background:var(--adp-cyan);\r\n}\r\n\r\n.adp-icons-table-wrap{\r\n    overflow:auto;\r\n    margin-top:23px;\r\n    border:1px solid var(--adp-line);\r\n    border-radius:18px;\r\n    background:#fff;\r\n}\r\n\r\n.adp-icons-table{\r\n    width:100%;\r\n    min-width:760px;\r\n    border-collapse:collapse;\r\n}\r\n\r\n.adp-icons-table th,\r\n.adp-icons-table td{\r\n    padding:16px 17px;\r\n    border-bottom:1px solid var(--adp-line);\r\n    text-align:left;\r\n    vertical-align:top;\r\n}\r\n\r\n.adp-icons-table th{\r\n    background:var(--adp-soft);\r\n    color:var(--adp-ink);\r\n    font-size:14px;\r\n}\r\n\r\n.adp-icons-table td{\r\n    color:#556477;\r\n    font-size:14px;\r\n}\r\n\r\n.adp-icons-table tr:last-child td{\r\n    border-bottom:0;\r\n}\r\n\r\n.adp-icons-steps{\r\n    display:grid;\r\n    grid-template-columns:repeat(4,minmax(0,1fr));\r\n    gap:15px;\r\n    counter-reset:adp-icons-step;\r\n}\r\n\r\n.adp-icons-step{\r\n    padding:21px;\r\n    border:1px solid var(--adp-line);\r\n    border-radius:17px;\r\n    background:var(--adp-soft);\r\n    counter-increment:adp-icons-step;\r\n}\r\n\r\n.adp-icons-step::before{\r\n    display:grid;\r\n    place-items:center;\r\n    width:37px;\r\n    height:37px;\r\n    margin-bottom:14px;\r\n    border-radius:11px;\r\n    background:var(--adp-cyan);\r\n    color:#fff;\r\n    font-family:\"Montserrat\",sans-serif;\r\n    font-weight:700;\r\n    content:counter(adp-icons-step);\r\n}\r\n\r\n.adp-icons-step:nth-child(even)::before{\r\n    background:var(--adp-orange);\r\n}\r\n\r\n.adp-icons-step h3{\r\n    margin:0;\r\n    font-size:17px;\r\n}\r\n\r\n.adp-icons-step p{\r\n    margin:8px 0 0;\r\n    color:var(--adp-muted);\r\n    font-size:14px;\r\n}\r\n\r\n.adp-icons-checklist{\r\n    display:grid;\r\n    gap:12px;\r\n    margin-top:22px;\r\n}\r\n\r\n.adp-icons-check{\r\n    position:relative;\r\n    padding:15px 16px 15px 50px;\r\n    border:1px solid var(--adp-line);\r\n    border-radius:14px;\r\n    background:#fff;\r\n    color:var(--adp-muted);\r\n}\r\n\r\n.adp-icons-check::before{\r\n    position:absolute;\r\n    top:14px;\r\n    left:14px;\r\n    display:grid;\r\n    place-items:center;\r\n    width:26px;\r\n    height:26px;\r\n    border-radius:9px;\r\n    background:var(--adp-cyan);\r\n    color:#fff;\r\n    font-size:12px;\r\n    font-weight:700;\r\n    content:\"\u2713\";\r\n}\r\n\r\n.adp-icons-check:nth-child(even)::before{\r\n    background:var(--adp-orange);\r\n}\r\n\r\n.adp-icons-notes{\r\n    display:grid;\r\n    grid-template-columns:repeat(2,minmax(0,1fr));\r\n    gap:18px;\r\n    margin-top:23px;\r\n}\r\n\r\n.adp-icons-note{\r\n    padding:23px;\r\n    border:1px solid var(--adp-line);\r\n    border-radius:18px;\r\n}\r\n\r\n.adp-icons-note:first-child{\r\n    background:var(--adp-warm);\r\n}\r\n\r\n.adp-icons-note:last-child{\r\n    background:var(--adp-soft);\r\n}\r\n\r\n.adp-icons-note h3{\r\n    margin:0;\r\n    font-size:18px;\r\n}\r\n\r\n.adp-icons-note p{\r\n    margin:9px 0 0;\r\n    color:#58677a;\r\n    font-size:14.5px;\r\n}\r\n\r\n.adp-icons-faq{\r\n    display:grid;\r\n    gap:11px;\r\n}\r\n\r\n.adp-icons-faq details{\r\n    overflow:hidden;\r\n    border:1px solid var(--adp-line);\r\n    border-radius:15px;\r\n    background:#fff;\r\n}\r\n\r\n.adp-icons-faq summary{\r\n    position:relative;\r\n    padding:17px 18px 17px 55px;\r\n    background:var(--adp-soft);\r\n    color:var(--adp-ink);\r\n    cursor:pointer;\r\n    list-style:none;\r\n    font-weight:700;\r\n}\r\n\r\n.adp-icons-faq summary::-webkit-details-marker{\r\n    display:none;\r\n}\r\n\r\n.adp-icons-faq summary::before{\r\n    position:absolute;\r\n    left:16px;\r\n    top:50%;\r\n    transform:translateY(-50%);\r\n    display:grid;\r\n    place-items:center;\r\n    width:26px;\r\n    height:26px;\r\n    border-radius:50%;\r\n    background:var(--adp-cyan);\r\n    color:#fff;\r\n    font-family:\"Montserrat\",sans-serif;\r\n    font-size:18px;\r\n    content:\"+\";\r\n}\r\n\r\n.adp-icons-faq details[open] summary::before{\r\n    background:var(--adp-orange);\r\n    content:\"\u2212\";\r\n}\r\n\r\n.adp-icons-faq-answer{\r\n    padding:17px 20px 20px;\r\n    color:#59687c;\r\n    font-size:14.5px;\r\n}\r\n\r\n.adp-icons-social{\r\n    margin:58px 0 0;\r\n    padding:26px;\r\n    border:1px solid var(--adp-line);\r\n    border-radius:20px;\r\n    background:var(--adp-soft);\r\n    text-align:center;\r\n}\r\n\r\n.adp-icons-social h2{\r\n    margin:0;\r\n    font-size:23px;\r\n}\r\n\r\n.adp-icons-social p{\r\n    margin:7px 0 0;\r\n    color:var(--adp-muted);\r\n}\r\n\r\n.adp-icons-social-links{\r\n    display:flex;\r\n    justify-content:center;\r\n    flex-wrap:wrap;\r\n    gap:10px;\r\n    margin-top:16px;\r\n}\r\n\r\n.adp-icons-social-links a{\r\n    min-width:120px;\r\n    padding:9px 15px;\r\n    border:1px solid var(--adp-line);\r\n    border-radius:10px;\r\n    background:#fff;\r\n    font-size:14px;\r\n    font-weight:700;\r\n}\r\n\r\n@media (max-width:980px){\r\n    .adp-icons-grid{\r\n        grid-template-columns:repeat(2,minmax(0,1fr));\r\n    }\r\n\r\n    .adp-icons-steps{\r\n        grid-template-columns:repeat(2,minmax(0,1fr));\r\n    }\r\n}\r\n\r\n@media (max-width:760px){\r\n    .adp-icons-container{\r\n        width:min(100% - 24px,1180px);\r\n    }\r\n\r\n    .adp-icons-hero{\r\n        width:100vw;\r\n        aspect-ratio:auto;\r\n        min-height:0;\r\n        margin-top:10px;\r\n        background:#fff;\r\n    }\r\n\r\n    .adp-icons-hero::after{\r\n        background:linear-gradient(\r\n            180deg,\r\n            rgba(255,255,255,.96) 0%,\r\n            rgba(255,255,255,.88) 39%,\r\n            rgba(255,255,255,.18) 68%,\r\n            rgba(255,255,255,0) 82%\r\n        );\r\n    }\r\n\r\n    .adp-icons-hero-copy{\r\n        position:relative;\r\n        top:auto;\r\n        left:auto;\r\n        right:auto;\r\n        bottom:auto;\r\n        justify-content:flex-start;\r\n        width:calc(100% - 32px);\r\n        min-height:0;\r\n        margin:0 16px;\r\n        padding:30px 6px 24px;\r\n    }\r\n\r\n    .adp-icons-hero h1{\r\n        max-width:520px;\r\n        font-size:31px;\r\n    }\r\n\r\n    .adp-icons-hero-lead{\r\n        max-width:500px;\r\n        font-size:15px;\r\n        line-height:1.85;\r\n    }\r\n\r\n    .adp-icons-hero-image{\r\n        position:relative;\r\n        inset:auto;\r\n        height:auto;\r\n    }\r\n\r\n    .adp-icons-hero-image img{\r\n        width:100%;\r\n        height:auto;\r\n        object-fit:contain;\r\n        object-position:center center;\r\n    }\r\n\r\n    .adp-icons-section{\r\n        margin-top:44px;\r\n    }\r\n\r\n    .adp-icons-section h2{\r\n        font-size:25px;\r\n    }\r\n\r\n    .adp-icons-grid,\r\n    .adp-icons-steps,\r\n    .adp-icons-notes{\r\n        grid-template-columns:1fr;\r\n    }\r\n\r\n    .adp-icons-feature{\r\n        grid-template-columns:1fr;\r\n        padding:22px;\r\n    }\r\n\r\n    .adp-icons-feature-image{\r\n        width:min(100%,320px);\r\n        min-height:0;\r\n        order:-1;\r\n        margin-inline:auto;\r\n    }\r\n\r\n    .adp-icons-feature-image img{\r\n        width:100%;\r\n        height:100%;\r\n        max-width:none;\r\n        max-height:none;\r\n        object-fit:cover;\r\n    }\r\n\r\n    .adp-icons-social-links{\r\n        flex-direction:column;\r\n    }\r\n\r\n    .adp-icons-social-links a{\r\n        width:100%;\r\n    }\r\n}\r\n<\/style>\r\n\r\n<div class=\"adp-icons-hub\" dir=\"ltr\" lang=\"en\">\r\n    <div class=\"adp-icons-container\">\r\n\r\n        <header class=\"adp-icons-hero\">\r\n            <div class=\"adp-icons-hero-image\" aria-hidden=\"true\">\r\n                <img\r\n                    src=\"https:\/\/adawatiplus.online\/wp-content\/uploads\/2026\/08\/icons-library-hero.webp.jpg\"\r\n                    alt=\"\"\r\n                    loading=\"eager\"\r\n                    decoding=\"async\"\r\n                    fetchpriority=\"high\"\r\n                \/>\r\n            <\/div>\r\n\r\n            <div class=\"adp-icons-hero-copy\">\r\n                <span class=\"adp-icons-kicker\">Icon Library & Tools<\/span>\r\n\r\n                <h1>\r\n                    Digital Icon Library\r\n                    <span>for Interfaces, Websites and Favicons<\/span>\r\n                <\/h1>\r\n\r\n                <p class=\"adp-icons-hero-lead\">\r\n                    A practical library of ready-to-use icons and Favicon tools that helps you choose the right visual symbol and prepare it for websites, user interfaces, browsers and different devices from one place.\r\n                <\/p>\r\n\r\n                <div class=\"adp-icons-hero-actions\" aria-label=\"Icon Library and Favicon links\">\r\n                    <a class=\"adp-icons-hero-btn adp-icons-hero-btn-icons\"\r\n                       href=\"https:\/\/enstaging.adawatiplus.online\/icons-library\/\"\r\n                       aria-label=\"Open the Icon Library\">\r\n                        Icons\r\n                    <\/a>\r\n\r\n                    <a class=\"adp-icons-hero-btn adp-icons-hero-btn-favicons\"\r\n                       href=\"https:\/\/enstaging.adawatiplus.online\/favicon-generator\/\"\r\n                       aria-label=\"Open the Favicon Generator\">\r\n                        Favicons\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n        <\/header>\r\n\r\n        <section class=\"adp-icons-section\" aria-labelledby=\"adp-icons-intro-title\">\r\n            <div class=\"adp-icons-section-head\">\r\n                <span class=\"adp-icons-section-kicker\">More Than Decorative Symbols<\/span>\r\n                <h2 id=\"adp-icons-intro-title\">Why Do Icons Play an Essential Role in User Experience?<\/h2>\r\n                <p class=\"adp-icons-section-intro\">\r\n                    A clear interface does not rely on text alone. When an icon is used in the right place, it helps users recognize a function faster, reduces the need for lengthy explanations, and supports the visual hierarchy of a page. Its real value, however, appears when the icon is understandable and consistent with the rest of the interface rather than being used simply to fill space.\r\n                <\/p>\r\n            <\/div>\r\n\r\n            <div class=\"adp-icons-grid\">\r\n                <article class=\"adp-icons-card\">\r\n                    <h3>Faster Visual Guidance<\/h3>\r\n                    <p>Search, download, share and settings icons have become familiar to users, and using them correctly makes important functions easier to discover.<\/p>\r\n                <\/article>\r\n\r\n                <article class=\"adp-icons-card\">\r\n                    <h3>Less Interface Clutter<\/h3>\r\n                    <p>In limited spaces, a well-chosen icon can communicate a clear function without requiring long labels around every button or interface element.<\/p>\r\n                <\/article>\r\n\r\n                <article class=\"adp-icons-card\">\r\n                    <h3>Better Consistency Across Pages<\/h3>\r\n                    <p>When icons share the same weight, visual style and scale, the interface feels more connected and navigation between different parts of the website becomes more comfortable.<\/p>\r\n                <\/article>\r\n\r\n                <article class=\"adp-icons-card\">\r\n                    <h3>More Flexibility for Developers and Designers<\/h3>\r\n                    <p>Formats such as SVG provide flexibility for changing size and color inside a project, while PNG is useful when you need a ready-made raster file.<\/p>\r\n                <\/article>\r\n\r\n                <article class=\"adp-icons-card\">\r\n                    <h3>A Clearer Website Identity<\/h3>\r\n                    <p>A Favicon is not part of the interface controls, but it completes the visual identity of a website and helps users recognize it among browser tabs and shortcuts.<\/p>\r\n                <\/article>\r\n\r\n                <article class=\"adp-icons-card\">\r\n                    <h3>More Accurate Choices for Each Use Case<\/h3>\r\n                    <p>Not every icon works in every context. A symbol that works well in a navigation menu may not work inside a small button or application, so quality begins with choosing the right icon.<\/p>\r\n                <\/article>\r\n            <\/div>\r\n        <\/section>\r\n\r\n        <section class=\"adp-icons-section\" aria-labelledby=\"adp-icons-sections-title\">\r\n            <div class=\"adp-icons-section-head\">\r\n                <span class=\"adp-icons-section-kicker\">Two Complementary Tools<\/span>\r\n                <h2 id=\"adp-icons-sections-title\">Start with the Icon Library or Create a Favicon for Your Website<\/h2>\r\n                <p class=\"adp-icons-section-intro\">\r\n                    This page brings together two different paths that are both connected to website visual identity: finding ready-made icons for interfaces and creating a custom website icon for browsers and devices.\r\n                <\/p>\r\n            <\/div>\r\n\r\n            <article class=\"adp-icons-feature\">\r\n                <div class=\"adp-icons-feature-copy\">\r\n                    <h3>General Icon Library<\/h3>\r\n\r\n                    <p>\r\n                        When you need a symbol for a button, menu, card or interface state, start with the Icon Library. The goal is to find a clear icon quickly and use it in the appropriate form inside your project instead of searching through different sources every time.\r\n                    <\/p>\r\n\r\n                    <p>\r\n                        The library is useful for developers, UI\/UX designers and website owners who regularly need visual elements for web pages, dashboards and digital projects. Web-friendly formats also make it easier to integrate icons into a design and control their size or color depending on the file type.\r\n                    <\/p>\r\n\r\n                    <div class=\"adp-icons-feature-points\">\r\n                        <span>User Interfaces<\/span>\r\n                        <span>Websites<\/span>\r\n                        <span>SVG<\/span>\r\n                        <span>Functional Icons<\/span>\r\n                    <\/div>\r\n\r\n                    <a class=\"adp-icons-cta\" href=\"#adp-icons-intro-title\">\r\n                        Explore the Icon Library\r\n                    <\/a>\r\n                <\/div>\r\n\r\n                <div class=\"adp-icons-feature-image\">\r\n                    <img\r\n                        src=\"https:\/\/enstaging.adawatiplus.online\/wp-content\/uploads\/2026\/08\/icons-1.png\"\r\n                        alt=\"General icon library for websites and user interfaces\"\r\n                        loading=\"lazy\"\r\n                        decoding=\"async\"\r\n                    \/>\r\n                <\/div>\r\n            <\/article>\r\n\r\n            <article class=\"adp-icons-feature\">\r\n                <div class=\"adp-icons-feature-copy\">\r\n                    <h3>Favicon Generator<\/h3>\r\n\r\n                    <p>\r\n                        If your goal is to create the website icon itself, the process is different. Upload a logo or image, or start with text or an emoji, then prepare the icon sizes needed for browsers, Apple devices, Android devices and modern web experiences.\r\n                    <\/p>\r\n\r\n                    <p>\r\n                        The generator helps you move from a single source image to an organized Favicon package instead of creating every file manually. It is also useful when updating an older website identity or checking whether an existing icon remains clear at very small sizes.\r\n                    <\/p>\r\n\r\n                    <div class=\"adp-icons-feature-points\">\r\n                        <span>favicon.ico<\/span>\r\n                        <span>PNG<\/span>\r\n                        <span>Apple Touch<\/span>\r\n                        <span>Android<\/span>\r\n                        <span>Manifest<\/span>\r\n                    <\/div>\r\n\r\n                    <a class=\"adp-icons-cta\"\r\n                       href=\"https:\/\/enstaging.adawatiplus.online\/favicon-generator\/\">\r\n                        Open Favicon Generator\r\n                    <\/a>\r\n                <\/div>\r\n\r\n                <div class=\"adp-icons-feature-image\">\r\n                    <img\r\n                        src=\"https:\/\/enstaging.adawatiplus.online\/wp-content\/uploads\/2026\/08\/favions.png\"\r\n                        alt=\"Favicon Generator for creating website icons for browsers and devices\"\r\n                        loading=\"lazy\"\r\n                        decoding=\"async\"\r\n                    \/>\r\n                <\/div>\r\n            <\/article>\r\n        <\/section>\r\n\r\n        <section class=\"adp-icons-section\" aria-labelledby=\"adp-icons-formats-title\">\r\n            <div class=\"adp-icons-section-head\">\r\n                <span class=\"adp-icons-section-kicker\">Choose the Right Format<\/span>\r\n                <h2 id=\"adp-icons-formats-title\">SVG, PNG or ICO? Choose the File Based on Where You Will Use It<\/h2>\r\n                <p class=\"adp-icons-section-intro\">\r\n                    There is no single format that is ideal for every icon. Using a symbol inside a modern web interface is different from using it as a browser icon, so it is better to choose the format according to the context rather than relying on the same file everywhere.\r\n                <\/p>\r\n            <\/div>\r\n\r\n            <div class=\"adp-icons-table-wrap\">\r\n                <table class=\"adp-icons-table\">\r\n                    <thead>\r\n                        <tr>\r\n                            <th>Format<\/th>\r\n                            <th>When Is It Suitable?<\/th>\r\n                            <th>Main Advantage<\/th>\r\n                            <th>What Should You Consider?<\/th>\r\n                        <\/tr>\r\n                    <\/thead>\r\n                    <tbody>\r\n                        <tr>\r\n                            <td>SVG<\/td>\r\n                            <td>Icons for modern websites and user interfaces<\/td>\r\n                            <td>Scales without losing sharpness and provides excellent styling flexibility<\/td>\r\n                            <td>Review the file structure if you plan to embed it directly in HTML or control it through CSS.<\/td>\r\n                        <\/tr>\r\n\r\n                        <tr>\r\n                            <td>PNG<\/td>\r\n                            <td>Icons that require a ready-made raster file or transparent background<\/td>\r\n                            <td>Easy to use and widely supported<\/td>\r\n                            <td>Choose the appropriate dimensions so you do not load a file larger than necessary.<\/td>\r\n                        <\/tr>\r\n\r\n                        <tr>\r\n                            <td>ICO<\/td>\r\n                            <td>Favicon packages and traditional browser compatibility<\/td>\r\n                            <td>A traditional format that works well as a fallback website icon<\/td>\r\n                            <td>An ICO file can contain multiple sizes, but using it does not necessarily mean you will not need other icon files.<\/td>\r\n                        <\/tr>\r\n                    <\/tbody>\r\n                <\/table>\r\n            <\/div>\r\n        <\/section>\r\n\r\n        <section class=\"adp-icons-section\" aria-labelledby=\"adp-icons-choice-title\">\r\n            <div class=\"adp-icons-section-head\">\r\n                <span class=\"adp-icons-section-kicker\">Before Downloading or Copying<\/span>\r\n                <h2 id=\"adp-icons-choice-title\">How Do You Choose the Right Interface Icon Instead of Simply Choosing the Prettiest One?<\/h2>\r\n                <p class=\"adp-icons-section-intro\">\r\n                    A successful icon is not judged by how attractive it looks on its own, but by how clearly it communicates inside the interface. Before choosing a symbol, review its meaning, size, visual style and the context in which it will appear.\r\n                <\/p>\r\n            <\/div>\r\n\r\n            <div class=\"adp-icons-steps\">\r\n                <article class=\"adp-icons-step\">\r\n                    <h3>Start with the Function<\/h3>\r\n                    <p>Define what the user needs to understand: download, delete, edit, share, search or settings. Meaning should come before appearance.<\/p>\r\n                <\/article>\r\n\r\n                <article class=\"adp-icons-step\">\r\n                    <h3>Keep the Style Consistent<\/h3>\r\n                    <p>Avoid mixing extremely thin icons with heavy filled icons on the same screen unless there is a clear design reason for doing so.<\/p>\r\n                <\/article>\r\n\r\n                <article class=\"adp-icons-step\">\r\n                    <h3>Test the Actual Size<\/h3>\r\n                    <p>An icon that looks excellent in a large preview may become unclear when placed inside a small button or navigation bar.<\/p>\r\n                <\/article>\r\n\r\n                <article class=\"adp-icons-step\">\r\n                    <h3>Add a Label When Needed<\/h3>\r\n                    <p>If an icon is unfamiliar or could be interpreted in more than one way, use a text label or supporting description instead of forcing users to guess.<\/p>\r\n                <\/article>\r\n            <\/div>\r\n        <\/section>\r\n\r\n        <section class=\"adp-icons-section\" aria-labelledby=\"adp-icons-ux-title\">\r\n            <div class=\"adp-icons-section-head\">\r\n                <span class=\"adp-icons-section-kicker\">Practical UI\/UX Use<\/span>\r\n                <h2 id=\"adp-icons-ux-title\">Good Icons Support an Interface, but They Should Never Replace Clarity<\/h2>\r\n                <p class=\"adp-icons-section-intro\">\r\n                    It is easy to overuse icons, especially because they can make an interface appear more modern. Too many unnecessary symbols, however, can make a page harder to read. The better approach is to use an icon when it adds meaning or helps users understand something faster.\r\n                <\/p>\r\n            <\/div>\r\n\r\n            <div class=\"adp-icons-checklist\">\r\n                <div class=\"adp-icons-check\">\r\n                    Use familiar symbols for common functions whenever possible, and avoid changing the meaning of widely recognized icons without a strong reason.\r\n                <\/div>\r\n\r\n                <div class=\"adp-icons-check\">\r\n                    Maintain an appropriate clickable area around interactive icons. The visual size of a symbol is not the same as the size of the clickable button.\r\n                <\/div>\r\n\r\n                <div class=\"adp-icons-check\">\r\n                    Do not rely on color alone to explain an icon state. Use shape, text or another interactive state when additional distinction is required.\r\n                <\/div>\r\n\r\n                <div class=\"adp-icons-check\">\r\n                    If an icon is purely decorative, do not allow it to compete visually with the primary content or important headings.\r\n                <\/div>\r\n\r\n                <div class=\"adp-icons-check\">\r\n                    For important actions, test the icon with clear text when the function is sensitive, such as deleting information, making a payment or submitting a final form.\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"adp-icons-notes\">\r\n                <aside class=\"adp-icons-note\">\r\n                    <h3>An Icon Is Not Automatically a Replacement for Text<\/h3>\r\n                    <p>\r\n                        Some icons are immediately understandable, while others depend heavily on the product context. When there is a real possibility of confusion, a text label improves the experience rather than adding unnecessary information.\r\n                    <\/p>\r\n                <\/aside>\r\n\r\n                <aside class=\"adp-icons-note\">\r\n                    <h3>Consistency Matters More Than Variety<\/h3>\r\n                    <p>\r\n                        A large icon library gives you many options, but the goal is not to use as many styles as possible. Choose icons with similar shapes, weights and visual characteristics so the interface feels like one unified product.\r\n                    <\/p>\r\n                <\/aside>\r\n            <\/div>\r\n        <\/section>\r\n\r\n        <section class=\"adp-icons-section\" aria-labelledby=\"adp-icons-performance-title\">\r\n            <div class=\"adp-icons-section-head\">\r\n                <span class=\"adp-icons-section-kicker\">Performance and Implementation<\/span>\r\n                <h2 id=\"adp-icons-performance-title\">How Can You Use Icons Without Adding Unnecessary Weight to a Page?<\/h2>\r\n                <p class=\"adp-icons-section-intro\">\r\n                    Icons are usually small files, but the way they are implemented still matters. Loading too many files, using images larger than necessary or repeatedly requesting the same resources can increase page requests and make interface management less efficient.\r\n                <\/p>\r\n            <\/div>\r\n\r\n            <div class=\"adp-icons-grid\">\r\n                <article class=\"adp-icons-card\">\r\n                    <h3>Use the Size You Actually Need<\/h3>\r\n                    <p>If you display a small PNG icon, avoid loading a very large version and relying only on CSS to reduce its displayed size.<\/p>\r\n                <\/article>\r\n\r\n                <article class=\"adp-icons-card\">\r\n                    <h3>Use SVG for Vector Icons<\/h3>\r\n                    <p>SVG works well when you need to change size or color while preserving sharp lines across different screen densities.<\/p>\r\n                <\/article>\r\n\r\n                <article class=\"adp-icons-card\">\r\n                    <h3>Do Not Load an Entire Library for One Icon<\/h3>\r\n                    <p>If you use an external icon library, consider whether its loading method makes sense for the number of icons your project actually uses.<\/p>\r\n                <\/article>\r\n\r\n                <article class=\"adp-icons-card\">\r\n                    <h3>Organize File Names<\/h3>\r\n                    <p>Clear file names reduce maintenance mistakes, especially as the interface grows and includes dozens of icons or several versions of the same symbol.<\/p>\r\n                <\/article>\r\n\r\n                <article class=\"adp-icons-card\">\r\n                    <h3>Test Dark Mode<\/h3>\r\n                    <p>An icon that looks excellent on a white background may disappear on a dark one. Review contrast if your interface supports multiple appearance modes.<\/p>\r\n                <\/article>\r\n\r\n                <article class=\"adp-icons-card\">\r\n                    <h3>Review Icons on Mobile<\/h3>\r\n                    <p>Small screens expose alignment and sizing problems quickly, so test buttons and icons inside the actual mobile interface.<\/p>\r\n                <\/article>\r\n            <\/div>\r\n        <\/section>\r\n\r\n        <section class=\"adp-icons-section\" aria-labelledby=\"adp-icons-favicon-title\">\r\n            <div class=\"adp-icons-section-head\">\r\n                <span class=\"adp-icons-section-kicker\">Your Website Icon<\/span>\r\n                <h2 id=\"adp-icons-favicon-title\">When Do You Need a Custom Favicon Instead of Using Your Full Logo?<\/h2>\r\n                <p class=\"adp-icons-section-intro\">\r\n                    A full logo may include a long brand name or fine details, while a Favicon is displayed in a very small area. For that reason, a simplified compact version is often more effective.\r\n                <\/p>\r\n            <\/div>\r\n\r\n            <div class=\"adp-icons-grid\">\r\n                <article class=\"adp-icons-card\">\r\n                    <h3>A Long Horizontal Logo<\/h3>\r\n                    <p>Use the standalone symbol or first letter instead of squeezing the full brand name into a very small square.<\/p>\r\n                <\/article>\r\n\r\n                <article class=\"adp-icons-card\">\r\n                    <h3>A Detailed Visual Identity<\/h3>\r\n                    <p>Simplify fine lines and complex shapes so the icon remains recognizable at 16\u00d716 and 32\u00d732 pixels.<\/p>\r\n                <\/article>\r\n\r\n                <article class=\"adp-icons-card\">\r\n                    <h3>A New Website Without a Logo<\/h3>\r\n                    <p>You can begin with a clear letter or emoji and update the icon later when the project's visual identity becomes more established.<\/p>\r\n                <\/article>\r\n            <\/div>\r\n        <\/section>\r\n\r\n        <section class=\"adp-icons-section\" aria-labelledby=\"adp-icons-audience-title\">\r\n            <div class=\"adp-icons-section-head\">\r\n                <span class=\"adp-icons-section-kicker\">Who Is the Library For?<\/span>\r\n                <h2 id=\"adp-icons-audience-title\">One Space for Developers, Designers and Website Owners<\/h2>\r\n                <p class=\"adp-icons-section-intro\">\r\n                    The way icons are used depends on your role, so the library is designed to remain useful whether you build interfaces directly, design them visually or simply manage a website and need to find the right symbol quickly.\r\n                <\/p>\r\n            <\/div>\r\n\r\n            <div class=\"adp-icons-grid\">\r\n                <article class=\"adp-icons-card\">\r\n                    <h3>For Developers<\/h3>\r\n                    <p>Access icons that can be used in interfaces, with formats suitable for HTML, CSS and modern web projects.<\/p>\r\n                <\/article>\r\n\r\n                <article class=\"adp-icons-card\">\r\n                    <h3>For UI\/UX Designers<\/h3>\r\n                    <p>Compare different symbols and choose a visual style that remains consistent with the design system and the functions presented to users.<\/p>\r\n                <\/article>\r\n\r\n                <article class=\"adp-icons-card\">\r\n                    <h3>For Website Owners<\/h3>\r\n                    <p>Find icons for website content and create a clear Favicon without having to build every icon file manually from the beginning.<\/p>\r\n                <\/article>\r\n            <\/div>\r\n        <\/section>\r\n\r\n        <section class=\"adp-icons-section\" aria-labelledby=\"adp-icons-faq-title\">\r\n            <div class=\"adp-icons-section-head\">\r\n                <span class=\"adp-icons-section-kicker\">Frequently Asked Questions<\/span>\r\n                <h2 id=\"adp-icons-faq-title\">Frequently Asked Questions About the Icon Library and Favicons<\/h2>\r\n            <\/div>\r\n\r\n            <div class=\"adp-icons-faq\">\r\n                <details open>\r\n                    <summary>What is the difference between interface icons and a Favicon?<\/summary>\r\n                    <div class=\"adp-icons-faq-answer\">\r\n                        Interface icons are used inside a website or application to represent functions and elements such as search, download and settings. A Favicon represents the website itself and usually appears in browser tabs, shortcuts and some device interfaces.\r\n                    <\/div>\r\n                <\/details>\r\n\r\n                <details>\r\n                    <summary>When should I choose SVG instead of PNG?<\/summary>\r\n                    <div class=\"adp-icons-faq-answer\">\r\n                        SVG is suitable for vector icons that need to be resized or recolored while remaining sharp. PNG is useful when you need a ready-made raster image or transparency at a specific size.\r\n                    <\/div>\r\n                <\/details>\r\n\r\n                <details>\r\n                    <summary>Can I use an icon without any text?<\/summary>\r\n                    <div class=\"adp-icons-faq-answer\">\r\n                        Yes, when its meaning is familiar and clear in context. If the icon is unfamiliar or could cause confusion, it is better to add a text label or supporting description.\r\n                    <\/div>\r\n                <\/details>\r\n\r\n                <details>\r\n                    <summary>Is a Favicon the same as a website logo?<\/summary>\r\n                    <div class=\"adp-icons-faq-answer\">\r\n                        Not necessarily. A Favicon can be derived from the logo, but it often needs a simpler and more compact version so it remains clear at very small sizes.\r\n                    <\/div>\r\n                <\/details>\r\n\r\n                <details>\r\n                    <summary>Can I create a Favicon from an image or SVG file?<\/summary>\r\n                    <div class=\"adp-icons-faq-answer\">\r\n                        Yes. You can use an image or SVG file as the source and then generate the appropriate files and sizes for browsers and different devices.\r\n                    <\/div>\r\n                <\/details>\r\n\r\n                <details>\r\n                    <summary>Should I use the same icon style throughout my website?<\/summary>\r\n                    <div class=\"adp-icons-faq-answer\">\r\n                        Consistency is very important. Limited exceptions can work, but mixing icon sets with very different weights, corners and fill styles within the same interface can make the design feel less cohesive.\r\n                    <\/div>\r\n                <\/details>\r\n\r\n                <details>\r\n                    <summary>Does using more icons automatically make an interface better?<\/summary>\r\n                    <div class=\"adp-icons-faq-answer\">\r\n                        No. An icon is useful when it adds meaning or communicates a clear function more quickly. Using icons without a real purpose can increase visual noise and make the page harder to read.\r\n                    <\/div>\r\n                <\/details>\r\n\r\n                <details>\r\n                    <summary>Can icons be used in dark mode?<\/summary>\r\n                    <div class=\"adp-icons-faq-answer\">\r\n                        Yes, but you should test contrast and colors on both dark and light backgrounds, especially when an icon uses a single color that may be too close to the background.\r\n                    <\/div>\r\n                <\/details>\r\n\r\n                <details>\r\n                    <summary>Where should I start when building a new interface?<\/summary>\r\n                    <div class=\"adp-icons-faq-answer\">\r\n                        Start by listing the functions that require icons, choose a visually consistent icon set, and test the icons at their actual interface size before applying them throughout the entire project.\r\n                    <\/div>\r\n                <\/details>\r\n            <\/div>\r\n        <\/section>\r\n\r\n        <section class=\"adp-icons-social\" aria-labelledby=\"adp-icons-social-title\">\r\n            <h2 id=\"adp-icons-social-title\">Follow Adawati Plus<\/h2>\r\n            <p>Discover new tools, guides and platform updates.<\/p>\r\n\r\n            <div class=\"adp-icons-social-links\">\r\n                <a href=\"https:\/\/www.instagram.com\/lamsatmosamem\"\r\n                   target=\"_blank\"\r\n                   rel=\"noopener noreferrer external\">\r\n                    Instagram\r\n                <\/a>\r\n\r\n                <a href=\"https:\/\/www.facebook.com\/lamsatmosamem\"\r\n                   target=\"_blank\"\r\n                   rel=\"noopener noreferrer external\">\r\n                    Facebook\r\n                <\/a>\r\n            <\/div>\r\n        <\/section>\r\n\r\n    <\/div>\r\n<\/div>\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Icon Library &#038; Tools Digital Icon Library for Interfaces, Websites and Favicons A practical library of ready-to-use icons and Favicon [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1420,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-1352","page","type-page","status-publish","has-post-thumbnail","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Icon Library \u2013 SVG &amp; PNG Icons | Adawati Plus<\/title>\n<meta name=\"description\" content=\"Search SVG and PNG icons online, change colors, preview icons, download files, or copy icon code for websites, apps, and UI projects.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/adawatiplus.online\/en\/icons-library\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Icon Library \u2013 SVG &amp; PNG Icons | Adawati Plus\" \/>\n<meta property=\"og:description\" content=\"Search SVG and PNG icons online, change colors, preview icons, download files, or copy icon code for websites, apps, and UI projects.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/adawatiplus.online\/en\/icons-library\/\" \/>\n<meta property=\"og:site_name\" content=\"Adawati Plus\" \/>\n<meta property=\"article:modified_time\" content=\"2026-08-17T09:58:44+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/adawatiplus.online\/en\/wp-content\/uploads\/2026\/08\/favions.png\" \/>\n\t<meta property=\"og:image:width\" content=\"500\" \/>\n\t<meta property=\"og:image:height\" content=\"463\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/adawatiplus.online\\\/en\\\/icons-library\\\/\",\"url\":\"https:\\\/\\\/adawatiplus.online\\\/en\\\/icons-library\\\/\",\"name\":\"Icon Library \u2013 SVG & PNG Icons | Adawati Plus\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/adawatiplus.online\\\/en\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/adawatiplus.online\\\/en\\\/icons-library\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/adawatiplus.online\\\/en\\\/icons-library\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/adawatiplus.online\\\/en\\\/wp-content\\\/uploads\\\/2026\\\/08\\\/favions.png\",\"datePublished\":\"2026-08-10T14:43:04+00:00\",\"dateModified\":\"2026-08-17T09:58:44+00:00\",\"description\":\"Search SVG and PNG icons online, change colors, preview icons, download files, or copy icon code for websites, apps, and UI projects.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/adawatiplus.online\\\/en\\\/icons-library\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/adawatiplus.online\\\/en\\\/icons-library\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/adawatiplus.online\\\/en\\\/icons-library\\\/#primaryimage\",\"url\":\"https:\\\/\\\/adawatiplus.online\\\/en\\\/wp-content\\\/uploads\\\/2026\\\/08\\\/favions.png\",\"contentUrl\":\"https:\\\/\\\/adawatiplus.online\\\/en\\\/wp-content\\\/uploads\\\/2026\\\/08\\\/favions.png\",\"width\":500,\"height\":463,\"caption\":\"Icon Library and Favicon Generator for websites and user interfaces\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/adawatiplus.online\\\/en\\\/icons-library\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/adawatiplus.online\\\/en\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Icon Library\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/adawatiplus.online\\\/en\\\/#website\",\"url\":\"https:\\\/\\\/adawatiplus.online\\\/en\\\/\",\"name\":\"Adawati Plus\",\"description\":\"Free online tools for images, PDFs, developers, icons, QR codes, and more.\",\"publisher\":{\"@id\":\"https:\\\/\\\/adawatiplus.online\\\/en\\\/#organization\"},\"alternateName\":\"Adawati Plus\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/adawatiplus.online\\\/en\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/adawatiplus.online\\\/en\\\/#organization\",\"name\":\"Adawati Plus\",\"url\":\"https:\\\/\\\/adawatiplus.online\\\/en\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/adawatiplus.online\\\/en\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/adawatiplus.online\\\/en\\\/wp-content\\\/uploads\\\/2026\\\/08\\\/adp-english-logo-2026-08-13-133314.png\",\"contentUrl\":\"https:\\\/\\\/adawatiplus.online\\\/en\\\/wp-content\\\/uploads\\\/2026\\\/08\\\/adp-english-logo-2026-08-13-133314.png\",\"width\":922,\"height\":338,\"caption\":\"Adawati Plus\"},\"image\":{\"@id\":\"https:\\\/\\\/adawatiplus.online\\\/en\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Icon Library \u2013 SVG & PNG Icons | Adawati Plus","description":"Search SVG and PNG icons online, change colors, preview icons, download files, or copy icon code for websites, apps, and UI projects.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/adawatiplus.online\/en\/icons-library\/","og_locale":"en_US","og_type":"article","og_title":"Icon Library \u2013 SVG & PNG Icons | Adawati Plus","og_description":"Search SVG and PNG icons online, change colors, preview icons, download files, or copy icon code for websites, apps, and UI projects.","og_url":"https:\/\/adawatiplus.online\/en\/icons-library\/","og_site_name":"Adawati Plus","article_modified_time":"2026-08-17T09:58:44+00:00","og_image":[{"width":500,"height":463,"url":"https:\/\/adawatiplus.online\/en\/wp-content\/uploads\/2026\/08\/favions.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/adawatiplus.online\/en\/icons-library\/","url":"https:\/\/adawatiplus.online\/en\/icons-library\/","name":"Icon Library \u2013 SVG & PNG Icons | Adawati Plus","isPartOf":{"@id":"https:\/\/adawatiplus.online\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/adawatiplus.online\/en\/icons-library\/#primaryimage"},"image":{"@id":"https:\/\/adawatiplus.online\/en\/icons-library\/#primaryimage"},"thumbnailUrl":"https:\/\/adawatiplus.online\/en\/wp-content\/uploads\/2026\/08\/favions.png","datePublished":"2026-08-10T14:43:04+00:00","dateModified":"2026-08-17T09:58:44+00:00","description":"Search SVG and PNG icons online, change colors, preview icons, download files, or copy icon code for websites, apps, and UI projects.","breadcrumb":{"@id":"https:\/\/adawatiplus.online\/en\/icons-library\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/adawatiplus.online\/en\/icons-library\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/adawatiplus.online\/en\/icons-library\/#primaryimage","url":"https:\/\/adawatiplus.online\/en\/wp-content\/uploads\/2026\/08\/favions.png","contentUrl":"https:\/\/adawatiplus.online\/en\/wp-content\/uploads\/2026\/08\/favions.png","width":500,"height":463,"caption":"Icon Library and Favicon Generator for websites and user interfaces"},{"@type":"BreadcrumbList","@id":"https:\/\/adawatiplus.online\/en\/icons-library\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/adawatiplus.online\/en\/"},{"@type":"ListItem","position":2,"name":"Icon Library"}]},{"@type":"WebSite","@id":"https:\/\/adawatiplus.online\/en\/#website","url":"https:\/\/adawatiplus.online\/en\/","name":"Adawati Plus","description":"Free online tools for images, PDFs, developers, icons, QR codes, and more.","publisher":{"@id":"https:\/\/adawatiplus.online\/en\/#organization"},"alternateName":"Adawati Plus","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/adawatiplus.online\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/adawatiplus.online\/en\/#organization","name":"Adawati Plus","url":"https:\/\/adawatiplus.online\/en\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/adawatiplus.online\/en\/#\/schema\/logo\/image\/","url":"https:\/\/adawatiplus.online\/en\/wp-content\/uploads\/2026\/08\/adp-english-logo-2026-08-13-133314.png","contentUrl":"https:\/\/adawatiplus.online\/en\/wp-content\/uploads\/2026\/08\/adp-english-logo-2026-08-13-133314.png","width":922,"height":338,"caption":"Adawati Plus"},"image":{"@id":"https:\/\/adawatiplus.online\/en\/#\/schema\/logo\/image\/"}}]}},"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/adawatiplus.online\/en\/wp-json\/wp\/v2\/pages\/1352","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/adawatiplus.online\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/adawatiplus.online\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/adawatiplus.online\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/adawatiplus.online\/en\/wp-json\/wp\/v2\/comments?post=1352"}],"version-history":[{"count":41,"href":"https:\/\/adawatiplus.online\/en\/wp-json\/wp\/v2\/pages\/1352\/revisions"}],"predecessor-version":[{"id":1760,"href":"https:\/\/adawatiplus.online\/en\/wp-json\/wp\/v2\/pages\/1352\/revisions\/1760"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/adawatiplus.online\/en\/wp-json\/wp\/v2\/media\/1420"}],"wp:attachment":[{"href":"https:\/\/adawatiplus.online\/en\/wp-json\/wp\/v2\/media?parent=1352"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}