PHPackages websharks/sharkicons - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. websharks/sharkicons ActiveLibrary[Utility & Helpers](/categories/utility) websharks/sharkicons ==================== Font containing WebSharks logos/icons & more. 160620(9y ago)09.6k1GPL-3.0+CSS Since Apr 23Pushed 9y ago2 watchersCompare [ Source](https://github.com/websharks/sharkicons)[ Packagist](https://packagist.org/packages/websharks/sharkicons)[ Docs](https://github.com/websharks/sharkicons)[ RSS](/packages/websharks-sharkicons/feed)WikiDiscussions dev Synced 1mo ago READMEChangelog (6)Dependencies (1)Versions (8)Used By (1) WebSharks™ Icon Font (Sharkicons) --------------------------------- [](#websharks-icon-font-sharkicons) Font containing WebSharks logos/icons + many others; including FontAwesome! See: [**DEMO**](http://websharks.github.io/sharkicons/demo.html) *Contains over 750 icons. Total file size: 212kb (compare to stand-alone FontAwesome @ 136kb).* [![](https://camo.githubusercontent.com/bd9c75b7c4322f0c68e71cc94a44b53452fb69d9dff5a12d32bd1dd3dc61b0d3/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f6c6963656e73652f776562736861726b732f736861726b69636f6e732e737667)](https://github.com/websharks/sharkicons/blob/HEAD/LICENSE.txt)[![](https://camo.githubusercontent.com/fbb36fd2ffe8e6e39d45de7fe4c644d7f5fe8fe9f5c2d3d3988a9a23853161df/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6d6164652d772532465f3130302532355f707572655f617765736f6d655f73617563652d4142383135462e7376673f6c6162656c3d6d616465)](http://websharks-inc.com/)[![](https://camo.githubusercontent.com/d983a9cee2d6ae45788929f268bd90537221ac5e024789af268dd00e09df8093/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f62792d576562536861726b735f496e632e2d3635363539382e7376673f6c6162656c3d6279)](http://www.websharks-inc.com/team/)[![](https://camo.githubusercontent.com/9ac967a67731fce8115653bf10838aef74c8309acbcd036d26fe8180594afa65/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f72656c656173652f776562736861726b732f736861726b69636f6e732e7376673f6c6162656c3d6c6174657374)](https://github.com/websharks/sharkicons/releases)[![](https://camo.githubusercontent.com/0cf16bc48ada3828d3e5df2439235afc38ba67cebd78e26e557f16a99228a352/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f776562736861726b732f736861726b69636f6e732e7376673f6c6162656c3d7061636b6167697374)](https://packagist.org/packages/websharks/sharkicons)[![](https://camo.githubusercontent.com/9db855c955e5c0f049473f69f7feb971ce1fe2ee006a5279ebc08b77734f893b/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f6973737565732f776562736861726b732f736861726b69636f6e732e7376673f6c6162656c3d697373756573)](https://github.com/websharks/sharkicons/issues)[![](https://camo.githubusercontent.com/0a4d59fa4058aa4c6cb3e28e57e5d1f5f18ca38c0348fc3e531c44359e1cabf1/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f666f726b732f776562736861726b732f736861726b69636f6e732e7376673f6c6162656c3d666f726b73)](https://github.com/websharks/sharkicons/network)[![](https://camo.githubusercontent.com/383cc5ba1e40994304a181a3533db667b4c318a294d5eec63a1c106b67deea44/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f73746172732f776562736861726b732f736861726b69636f6e732e7376673f6c6162656c3d7374617273)](https://github.com/websharks/sharkicons/stargazers)[![](https://camo.githubusercontent.com/0cc3d6272e59df7e05affd258d1294efca239b1367b41beff0342731b5c7ce9e/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f646f776e6c6f6164732f776562736861726b732f736861726b69636f6e732f6c61746573742f746f74616c2e7376673f6c6162656c3d646f776e6c6f616473)](https://github.com/websharks/sharkicons/releases)[![](https://camo.githubusercontent.com/4d8fc4b793c15181521c014899d9179416c367c18607a01d6fbe330798d71f42/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f776562736861726b732f736861726b69636f6e732e7376673f6c6162656c3d7061636b6167697374)](https://packagist.org/packages/websharks/sharkicons) --- [![](assets/screenshot.png)](assets/screenshot.png) --- Using Icons in HTML Markup -------------------------- [](#using-icons-in-html-markup) ``` ``` ``` ``` --- Short Classes (`si-` instead of `sharkicon-`) --------------------------------------------- [](#short-classes-si--instead-of-sharkicon-) ``` ``` ``` ``` --- Including Classes via SCSS -------------------------- [](#including-classes-via-scss) ***Note:** Bourbon is a required dependency. See: for details.* ``` @import '/path/to/bourbon'; @import '/path/to/sharkicons/src/sharkicons'; @include sharkicons-font('/path/to/sharkicons/src'); @include sharkicon-short-classes; ``` --- Custom Classes via SCSS (`prefix` instead of `si`) -------------------------------------------------- [](#custom-classes-via-scss-prefix-instead-of-si) ``` @import '/path/to/bourbon'; @import '/path/to/sharkicons/src/sharkicons'; @include sharkicons-font('/path/to/sharkicons/src'); @include sharkicon-custom-classes(prefix); ``` --- Scoping Classes via SCSS ------------------------ [](#scoping-classes-via-scss) ``` @import '/path/to/bourbon'; @import '/path/to/sharkicons/src/sharkicons'; @include sharkicons-font('/path/to/sharkicons/src'); .my-product { @include sharkicon-short-classes; } ``` --- Creating an Icon via SCSS ------------------------- [](#creating-an-icon-via-scss) *Note: you can do this without including the `sharkicon-[long|short]-classes` if you like.* ``` @import '/path/to/bourbon'; @import '/path/to/sharkicons/src/sharkicons'; @include sharkicons-font('/path/to/sharkicons/src'); // @include sharkicon-short-classes; .my-product .my-icon { @include sharkicon(broom); } ``` Equivalent to: ``` .my-product .my-icon::before { content: '\e000'; font: normal normal normal 14px/1 sharkicons; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; display: inline-block; font-size: inherit; text-decoration: inherit; text-transform: none; } ``` Alternatively, you can pass a second argument to `sharkicon()` to set the before/after specification. The default value is `before`. You might want to change it to `after` in some special case. ``` @import '/path/to/bourbon'; @import '/path/to/sharkicons/src/sharkicons'; @include sharkicons-font('/path/to/sharkicons/src'); // @include sharkicon-short-classes; .my-product .my-icon { @include sharkicon(broom, after); } ``` Equivalent to: ``` .my-product .my-icon::after { content: '\e000'; font: normal normal normal 14px/1 sharkicons; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; display: inline-block; font-size: inherit; text-decoration: inherit; text-transform: none; } ``` --- Mapping An Icon Char via SCSS ----------------------------- [](#mapping-an-icon-char-via-scss) ``` .my-product .my-icon:hover::after { content: map-get($sharkicons, broom); } ``` ### Health Score 32 — LowBetter than 72% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity18 Limited adoption so far Community8 Small or concentrated contributor base Maturity68 Established project with proven stability How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~84 days Recently: every ~77 days Total 6 Last Release 3620d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/2c9e574030ba64b0b14dfbe9adfbd7633e0304ab3e2cc54ed9f427822eb6dcda?d=identicon)[jaswsinc](/maintainers/jaswsinc) ![](https://www.gravatar.com/avatar/79743cc4ae9c5dd8e76f40dc6157461066649dc46ea9fd1b35c8c1b27a411ea5?d=identicon)[raamdev](/maintainers/raamdev) --- Tags iconswebsharks ### Embed Badge ![Health badge](/badges/websharks-sharkicons/health.svg) ``` [![Health](https://phpackages.com/badges/websharks-sharkicons/health.svg)](https://phpackages.com/packages/websharks-sharkicons) ``` ### Alternatives [twbs/bootstrap-icons Official open source SVG icon library for Bootstrap 7.9k2.0M56](/packages/twbs-bootstrap-icons)[simple-icons/simple-icons SVG icons for popular brands 24.8k194.2k4](/packages/simple-icons-simple-icons)[driftyco/ionicons The premium icon font for Ionic Framework. 18.0k87.8k8](/packages/driftyco-ionicons)[mervick/material-design-icons Google Material Design Icons For Using With Bootstrap 10191.4k7](/packages/mervick-material-design-icons)[websharks/css-minifier Compresses CSS. 181.6M2](/packages/websharks-css-minifier)[codewithdennis/filament-lucide-icons A Filament plugin that integrates Lucide icons, allowing you to use them seamlessly across Filament forms, tables, actions, and more. 4529.4k2](/packages/codewithdennis-filament-lucide-icons) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)